uploadify---jQuery多文件上传

lavendersue

于 2019-12-16 11:08:35 发布

阅读量380

点赞数

分类专栏：常用插件文章标签：文件上传前端

原文链接：https://www.cnblogs.com/xingmeng/p/4479796.html https://www.sogou.com/link?url=58p16RfDRLvsgRwZ6iNBPowMFC8tI1AOXutvxOiYJeeihmq_7kJ1oveTOnMLoIBP

版权

常用插件专栏收录该内容

18 篇文章 0 订阅

订阅专栏

uploadify是一款jQuery的文件上传插件，支持多文件上传并显示进度条。虽然官网不可用，但可在Github或通过npm找到。提供百度网盘下载链接，但需要注意可能的不稳定性。前端代码示例已给出，但实际使用需配合后台服务。

摘要由CSDN通过智能技术生成

介绍

ploadify是JQuery的一个上传插件，支持多文件上传，实现的效果非常不错，带进度显示。

下载

前往官网进行下载，但小编发现，各路人马提供的官网全都打不开，在Github下载的文件为uploadifive.js ，小编怎么看这个文件名都觉得是个山寨货，所以小编不推荐这种方式。
通过npm下载
```
npm install --save uploadify
```
小编提供

百度网盘

链接：https://pan.baidu.com/s/1IhaakTzKvSqCsQaS1IXPAA
提取码：kxey

参数说明

属性

{
      auto:true,//设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 
      buttonClass:"",//按钮样式
      buttonCursor:"hand",//鼠标指针悬停在按钮上的样子
      buttonImage:null,//浏览按钮的图片的路径
      buttonText:"SELECT FILES",//浏览按钮的文本
      checkExisting:false,//文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0
      debug: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,或者理解为此任务的ID
                          fileName – 文件的名称
                          fileSize – 当前上传文件的大小
                          插入模版标签时使用格式如：${fileName}*/
      method:"Post",//提交方式Post或Get
      multi:true,//设置为true时可以上传多个文件
      overrideEvents:null,//设置哪些事件可以被重写，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
      preventCaching:true,//如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果
      progressData:"percentage",//设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度
      queueID:false,//设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器
      queueSizeLimit:999,//队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit
      removeCompleted:true,//是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示
      removeTimeout:3,//如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔
      requeueErrors:false,//如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传
      successTimeout:30,//文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间
      swf:"uploadify.swf",//uploadify.swf 文件的相对路径
      uploader:"uploadify.php",//后台处理程序的相对路径
      uploadLimit:999,//最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件
      width:120//设置文件浏览按钮的宽度
  }

事件

名称	说明
onCancel(file)	当点击文件队列中文件的关闭按钮或点击取消上传时触发，file参数为被取消上传的文件对象
onClearQueue(queueItemCount)	当调用函数cancel方法时触发，queueItemCount参数为被取消上传的文件数量
onDestroy()	当destory方法被调用时触发
onDialogClose(queueData)	当文件浏览框关闭时触发，如果将此事件被重写，则当向队列添加文件上传出错时不会弹出错误消息提示。 queueData对象包含如下属性： filesSelected – 文件选择对话框中共选择了多少个文件 filesQueued – 已经向队列中添加了多少个文件 filesReplaced – 已经向队列中替换了多少个文件 filesCancelled – 取消了多少个文件 filesErrored 出错了多少个文件
onDialogOpen()	当文件选择对话框弹出时立即出发，但可能在文件选择对话框被关闭之前并不能全部执行
onDisable()	当disable方法禁用Uploadify上传按钮时被调用时触发
onEnable()	当disable方法启用Uploadify上传按钮时被调用时触发
onFallback()	当Uploadify初始化过程中检测到当前浏览器不支持flash时触发
onInit()	首次初始化Uploadify结束时触发
onQueueComplete(queueData)	文件上传队列处理完毕后触发。 queueData对象包含如下属性： uploadsSuccessful – 上传成功的文件数量 uploadsErrored – 上传失败的文件数量
onSelect(file)	选择文件后向队列中添加每个上传任务时都会触发
onSelectError(file, errorCode, errorMsg)	选择文件后向队列中添加每个上传任务时如果失败都会触发。 file – 文件对象 errorCode – 错误代码如下： QUEUE_LIMIT_EXCEEDED – 任务数量超出队列限制 FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制 ZERO_BYTE_FILE – 文件大小为0 INVALID_FILETYPE – 文件类型不符合要求 errorMsg – 错误提示，可通过’this.queueData.errorMsg’定制
onSWFReady()	Flash文件载入成功后触发
onUploadComplete(file)	每个文件上传完毕后无论成功与否都会触发
onUploadError(file, errorCode, errorMsg, errorString)	文件上传出错时触发，参数由服务端程序返回
nUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)	处理上传队列的过程中会多次触发此事件，每当任务状态有更新时都会触发 file – 文件对象 bytesUploaded – 已上传的字节数 bytesTotal – 文件总字节数 totalBytesUploaded – 当前任务队列中全部文件已上传的总字节数 totalBytesTotal – 当前任务队列中全部文件的总字节数
onUploadStart(file)	当文件即将开始上传时立即触发
onUploadSuccess(file, data, response)	当文件上传成功时触发 file – 文件对象 data – 服务端输出返回的信息 response – 有输出时为true,如果无响应为false，如果返回的是false,当超过successTimeout设置的时间后假定为true

方法

名称	说明	示例
cancel(fileID, suppressEvent)	取消队列中的任务，不管此任务是否已经开始上传 fileID – 要取消的文件ID，如果为空则取消队列中第一个任务，如果为’*'则取消所有任务 suppressEvent – 是否阻止触发onUploadCancel事件，当清空队列时非常实用	`<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一个</a> <a href="javascript:$(‘#file_upload’).uploadify(‘cancel’, ‘’)">清空队列</a> <a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘’)">开始上传所有任务</a>`
destroy()	销毁Uploadify实例并将文件上传按钮恢复到原始状态	`<a href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">销毁Uploadify实例</a>`
disable(setDisabled)	禁用或启用文件浏览按钮 setDisabled – 设置为true表示禁用，false为启用	`<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, true)">禁用按钮</a> <a href="javascript:$(‘#file_upload’).uploadify(‘disable’, false)">启用按钮</a>`
settings(name, value, resetObjects)	获取或设置Uploadify实例参数 name – 属性名称，如果只提供属性名称则表示获取其值 value – 属性值 resetObjects – 设置为true时，更新postData对象将清空现有的值。否则，新的值将被添加到其末尾	`$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’); $(‘#file_upload’).uploadify(‘settings’,'buttonText’));`
stop()	停止当前正在上传的任务	`<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">开始上传</a> <a href="javascript:$(‘#file_upload’).uploadify(‘stop’)">停止上传</a>`
upload(fileID)	立即上传指定的文件，如果fileID为’*'表示上传所有文件，要指定上传多个文件，则将每个文件的fileID作为一个参数	`<a href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">开始上传所</a>`

完整示例：

<!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>

注：文件上传需要后台服务台的支持，故小编在此只贴出前端代码，毕竟，后台不归小编管呀~