django html图片上传,Django + zyUpload 实现图片的上传

zyUpload 是一个界面绝佳、体验超棒的 HTML5 上传插件，在网上随便就可以下载到。

上传前的效果图

上传后的效果图

zyFile.js 中的一些接口都是在 zyUpload.js 中实现！zyFile.js 中给外部提供的函数接口 filterFile 在 zyUpload.js 中可以找到，用来进行文件的过滤！对于 filterFile 这个接口，实现如下(当然，你可以根据自己的需求来实现，在这里只是想上传图片文件而已)：

/**

* 功能：过滤上传的文件格式等

* 参数: files 本次选择的文件

* 返回: 通过的文件

*/

this.funFilterEligibleFile = function(files){

var arrFiles = []; // 替换的文件数组

for (var i = 0, file; file = files[i]; i++) {

if (file.size >= 20480000) {

alert('您这个"'+ file.name +'"文件大小过大');

} else {

// 在这里需要判断当前所有文件中

var fileExt = file.name.substr(file.name.lastIndexOf(".")).toLowerCase(); //获得文件后缀名

if(fileExt == ".png" || fileExt == ".gif" || fileExt == ".jpg" || fileExt == ".jpeg")

arrFiles.push(file); //如果文件是图片格式，那么就放入文件的数组

else {

alert("文件仅限于png, gif, jpeg, jpg格式!");

}

}

}

return arrFiles;

};

filterFile: function(files) {

// 过滤合格的文件

return self.funFilterEligibleFile(files);

}

有以下几点需要注意：

在 Django 中使用 ImageField 之前，需要安装 Pillow，不然会报错：Cannot use ImageField because Pillow is not installed.

保证 zyFile.js 文件中的 formdata.append(name, file) 和后台逻辑代码中的 request.FILES.get(name) 的 name 属性值一样

在 initUpload.js 中设置 url 为上传路径

对于上传图片的查看需要在相应地 urls.py 文件中加入匹配规则 url(r'^media/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})