干货，Uploadfive插件上传，Python接收存储

在Web开发工作中，经常遇到上传需求，上传照片，文件等，网上的上传插件有很多，我使用的是一款H5上传插件Uploadfive,与之对应的是Uploadify,后者是基于Flash的，不过现在越来越多的浏览器都开始放弃Flash支持，这使得H5的上传插件逐渐流行开来。

• 安装

插件源地址下载是收费的，我提供一个下载链接：(挂载自己的网站下，解压密码:www.cc8789.net)

http://www.cc8789.net/resource/uploadifive-v1.2.2-standard.zip

希望土豪能支持原作者，毕竟创新不易：(源下载地址)

http://www.uploadify.com/download/download-uploadifive-standard/

安装就很简单了，下载后解压，将一下文件放入自己的静态文件中：

jquery.uploadifive.js

jquery.uploadifive.min.js

uploadifive.css

js文件放一个即可，css文件最好自己重写，这样才能统一网站风格。

• 使用

最简单的使用(官方教程)：

以上方法可以简单实用，不过我实现不是由PHP：

HTML：

定义几个标签，file-upload是文件上传的input

JS:

书写结构就是如上图的样式，有属性，和事件，

属性介绍及其默认值：

'auto' : true, // Automatically upload a file when it's added to the queue

'buttonClass' : false, // A class to add to the UploadiFive button

'buttonText' : 'Select Files', // The text that appears on the UploadiFive button（按钮文字）

'checkScript' : false, // Path to the script that checks for existing file names(检查是否重复上传的访问接口)

'dnd' : true, // Allow drag and drop into the queue(可拖着添加)

'dropTarget' : false, // Selector for the drop target(拖放目标的选择器)

'fileObjName' : 'Filedata', // 服务器拿文件的句柄就是这个属性

'fileSizeLimit' : 0, // 文件大小限制，默认无限制

'fileType' : false, // 文件类型，只传压缩包的话：'application/x-zip-compressed'，其他类型请参阅百度 mimetype

'formData' : {}, // （可携带的参数）

'height' : 31, // The height of the button

'itemTemplate' : false, // The HTML markup for the item in the queue

'method' : 'post', // The method to use when submitting the upload

'multi' : true, // 多文件上传

'overrideEvents' : [], // An array of events to override

'queueID' : false, // The ID of the file queue

'queueSizeLimit' : 0, // 队列大小，默认无限制

'removeCompleted' : false, //上传完成后移除

'simUploadLimit' : 0, // 一次上传最大数量

'truncateLength' : 0, // 文件名截断

'uploadLimit' : 0, // 上传数量限制

'uploadScript' : 'uploadifive.php', // 上传地址接口

'width' : 84 //上传按钮宽度

其中queueID这个属性如果想要实现进度展示，必须定义一个。

事件：

onAddQueueItem :添加队列时响应

onSelect：选择文件时响应

onProgress：上传过程响应

onUploadComplete：上传完成相应

onError：上传错误响应

方法：

cancel //取消

clearQueue //清除队列

debug //调试模式

destroy //清楚上传

upload //上传动作

上传流程：

用户点击选择文件添加文件 > 点击上传按钮，实现upload上传动作 > onUploadComplete事件监控服务器返回值，判断是否成功。

实例：

上传按钮关联onclick事件，调用upload_file函数。

• 服务器接收

我的服务器实现是Python框架写，整个过程就是：

拿到文件》判断是否存在》文件存储》文件处理》处理成功或失败》返回前端

file_handle = request.FILES["fileData"]

if file:

STORAGE_PATH = "."

file_name = file.name

path_file = os.path.join(STORAGE_PATH, file_name)

fp = open(path_file, 'wb')

for content in file.chunks():

fp.write(content)

fp.close()

以上实现了简单的文件存储，关于文件存储路径是否存在，文件是否重复，文件合法与否，返回值预设等，需读者在开发过程中做到更严格复杂的实现才行，返回值最好使用json返回。

文章由Python实践派原创，转载请注明。