zyUpload 是一个界面绝佳、体验超棒的 HTML5 上传插件，在网上随便就可以下载到。
上传前的效果图
上传后的效果图
项目源码地址：https://github.com/happy-python/zyUpload_demo
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<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})
