一点号Python实践派3小时前
在Web开发工作中，经常遇到上传需求，上传照片，文件等，网上的上传插件有很多，我使用的是一款H5上传插件Uploadfive,与之对应的是Uploadify,后者是基于Flash的，不过现在越来越多的浏览器都开始放弃Flash支持，这使得H5的上传插件逐渐流行开来。
安装
插件源地址下载是收费的，我提供一个下载链接：(挂载自己的网站下，解压密码:)
希望土豪能支持原作者，毕竟创新不易：(源下载地址)
安装就很简单了，下载后解压，将一下文件放入自己的静态文件中：
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实践派原创，转载请注明。