一。前端代码
<!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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
