介绍
ploadify是JQuery的一个上传插件，支持多文件上传，实现的效果非常不错，带进度显示。
下载
前往官网进行下载，但小编发现，各路人马提供的官网全都打不开，在Github下载的文件为uploadifive.js ，小编怎么看这个文件名都觉得是个山寨货，所以小编不推荐这种方式。通过npm下载npm install --save uploadify
小编提供
百度网盘
链接：/s/1IhaakTzKvSqCsQaS1IXPAA
提取码：kxey
参数说明
属性{auto:true,//设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 buttonClass:"",//按钮样式buttonCursor:"hand",//鼠标指针悬停在按钮上的样子buttonImage:null,//浏览按钮的图片的路径buttonText:"SELECT FILES",//浏览按钮的文本checkExisting:false,//文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0debug:false,//如果设置为true则表示启用SWFUpload的调试模式fileObjName:"Filedata",//文件上传对象的名称，如果命名为’the_files’，PHP程序可以用$_FILES['the_files']来处理上传的文件对象fileSizeLimit:0,//上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如’2MB’；如果设置为0则表示无限制fileTypeDesc:"All Files",//这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileTypeDesc为“请选择rar doc pdf文件”fileTypeExts:"*.*",//设置可以选择的文件的类型，格式如：’*.doc;*.pdf;*.rar’formData:null,//JSON格式上传每个文件的同时提交到服务器的额外数据，可在’onUploadStart’事件中使用’settings’方法动态设置height:30,//设置浏览按钮的高度 ，默认值itemTemplate:false,//用于设置上传队列的HTML模版，可以使用以下标签：instanceID – Uploadify实例的ID/*fileID – 列队中此文件的ID,或者理解为此任务的IDfileName – 文件的名称fileSize – 当前上传文件的大小插入模版标签时使用格式如：${fileName}*/method:"Post",//提交方式Post或Getmulti:true,//设置为true时可以上传多个文件overrideEvents:null,//设置哪些事件可以被重写，JSON格式，如：’overrideEvents’ : ['onUploadProgress']preventCaching:true,//如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果progressData:"percentage",//设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度queueID:false,//设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器queueSizeLimit:999,//队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimitremoveCompleted:true,//是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示removeTimeout:3,//如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔requeueErrors:false,//如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传successTimeout:30,//文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间swf:"uploadify.swf",//uploadify.swf 文件的相对路径uploader:"uploadify.php",//后台处理程序的相对路径uploadLimit:999,//最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件width:120//设置文件浏览按钮的宽度}
事件方法
完整示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="uploadify/uploadify.css"></head><body><h1>Uploadify Demo</h1><form><div id="queue"></div><input id="file_upload" name="file_upload" type="file" multiple="true"></form><h4>操作:</h4><a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>|<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>|<a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> |<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>|<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>|<a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> |<a href="changeBtnText();">变换按钮</a> |<h4>大小:</h4><div id='progress'></div><script src="js/jquery.min.js"></script><script src="uploadify/jquery.uploadify.v2.1.4.js"></script><script src="uploadify/swfobject.js"></script><script type="text/javascript">$(function() {$('#file_upload').uploadify({'debug' : false,'auto' : true, //是否自动上传,'buttonClass' : 'haha', //按钮辅助class'buttonText' : '上传图片', //按钮文字'height' : 30, //按钮高度'width' : 100, //按钮宽度'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false'fileObjName': 'files', //默认 Filedata, $_FILES控件名称'fileSizeLimit': '1024KB', //文件大小限制 0为无限制 默认KB'fileTypeDesc': 'All Files', //图片选择描述'fileTypeExts' : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*''formData' : {'someKey' : 'someValue','someOtherKey' : 1},//传输数据JSON格式// 'formData':{ 'albumid':$("#albumid").val() },//'overrideEvents': ['onUploadProgress'], // The progress will not be updated//'progressData': 'speed', //默认percentage 进度显示方式'queueID' : 'queue', //默认队列ID'queueSizeLimit' : 20, //一个队列上传文件数限制'removeCompleted': true, //完成时是否清除队列 默认true'removeTimeout': 3, //完成时清除队列显示秒数,默认3秒'requeueErrors': false, //队列上传出错，是否继续回滚队列'successTimeout': 5, //上传超时'uploadLimit' : 99, //允许上传的最多张数'swf' : '/uploadify/uploadify.swf', //swfUpload'uploader' : 'uploadify.php', //服务器端脚本//修改formData数据'onUploadStart' : function(file) {//$("#file_upload").uploadify("settings", "someOtherKey", 2);},'onUploadStart' : function(file) {// $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()});},//删除时触发'onCancel' : function(file) {//alert('The file ' + file.name + '--' + file.size + ' was cancelled.');},//清除队列'onClearQueue' : function(queueItemCount) {//alert(queueItemCount + ' file(s) were removed from the queue');},//调用destroy是触发'onDestroy' : function() {alert('我被销毁了');},//每次初始化一个队列是触发'onInit' : function(instance) {//alert('The queue ID is ' + instance.settings.queueID);},//上传成功'onUploadSuccess' : function(file, data,response) {//alert(file.name + ' | ' + response + ':' + data);},//上传错误'onUploadError' : function(file, errorCode,errorMsg, errorString) {//alert('The file ' + file.name + ' could not be uploaded: ' + errorString);},//上传汇总'onUploadProgress' : function(file,bytesUploaded, bytesTotal,totalBytesUploaded, totalBytesTotal) {$('#progress').html(totalBytesUploaded+ ' bytes uploaded of '+ totalBytesTotal+ ' bytes.');},//上传完成'onUploadComplete' : function(file) {//alert('The file ' + file.name + ' finished processing.');}});});//变换按钮function changeBtnText() {$('#file_upload').uploadify('settings', 'buttonText', '继续上传');}//返回按钮function returnBtnText() {alert('The button says '+ $('#file_upload').uploadify('settings', 'buttonText'));}</script></body></html>
注：文件上传需要后台服务台的支持，故小编在此只贴出前端代码，毕竟，后台不归小编管呀~
