Django + zyUpload 实现图片的上传

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.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})