一。前端代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> // 创建一个表单对象（用于存储要发送的data数据） form_data = new FormData; // 参数1：后端请求时要获取的参数, 参数2：图片文件File对象 form_data.append("files", $("#file_img")[0].files[0]); // 向后端发送 ajax 请求 $("#btn").click = function(){ $.ajax({ url: "/img/save/", method: "post", contentType: false, // 告诉jQuery不要去设置Content-Type请求头 processData: false, // 告诉jQuery不要去处理发送的数据 data: form_data, success: function(data){ console.log("上传成功！"); }, error: function(data){ console.log("上传失败！"); } }) } </script> <body> <form> <input type="file" id="file_img"> <input type="button" value="提交" id=btn> </form> </body> </html>
二。后端代码。
# 1. settings 设置图片保存路径 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, "up_img") # 2. models class Image(models.Model): path_and_rename = PathAndRename("order/pho")
# 图片存储路径 - 最终呈现路径：/up_img/order/pho/xx.jpg image = models.ImageField(verbose_name=u"图片", upload_to=path_and_rename) # 3. url url(r'^img/save/$', surface_save, imgViews), # 4. views def imgViews(request): file_img = request.FILES.get('files', None) filename, full_filename = save_image(file_img) Image.objects.create(image=filename) # 定义一个保存图片的方法 def save_image(files): filename = "%s.%s" % (timezone.now().strftime('%Y%m%d%H%M%S%f'), files.name.split('.')[-1]) full_filename = "%s/%s" % (settings.MEDIA_ROOT, filename) with open(full_filename, 'wb+') as destination: for chunk in files.chunks(): destination.write(chunk) return filename, full_filename
三。前端渲染
<img src="{{ img_obj.image.url }}" alt=""> # {{ img_obj.image.url }} 拿出来的是图片路径, img_obj是models中Image表对象
# 2. models