首页 > 代码库 > Uploadify 笔记分享 -- 2014年10月18日

Uploadify 笔记分享 -- 2014年10月18日

最近要做一个项目,有个部分需要用到Uploadify,以前用过,但不是很懂,找了无数遍的中文文档,发现好多都是以前的,都不能用,一时间索性自己写了个笔记,随用随查

 

    <form>

        <input id="file_upload" name="file_upload" type="file" multiple="true">

        <div id="fileQueue"></div>

    </form>

    <input type="image" src="http://www.mamicode.com/uploadify/img/upload.jpg" onclick="$(‘#file_upload‘).uploadify(‘upload‘, ‘*‘);" />

    <input type="image" src="http://www.mamicode.com/uploadify/img/cancel.jpg" onclick="$(‘#file_upload‘).uploadify(‘cancel‘, ‘*‘);" />

 

    <script type="text/javascript">

   

$(function() {

    $(‘#file_upload‘).uploadify({

        ‘swf‘: ‘uploadify/uploadify.swf‘,

flash地址              必须

        ‘uploader‘: ‘uploadify.php‘,    

上传的后台地址       必须

        ‘buttonImage‘: ‘uploadify/img/add.jpg‘,

上传按钮的替换图片

        ‘buttonClass‘: ‘my-uploadify-button‘, 

按钮样式

        ‘width‘: 102,                       

按钮宽度

      ‘height‘   : 50,

按钮高度

        ‘auto‘: false,                          

是否自动上传

        ‘queueID‘:‘fileQueue‘             

显示的上传内容所在的DIV 的ID

‘buttonText‘: ‘上传文件‘,

上传按钮的显示文本

 ‘fileSizeLimit‘ : ‘100KB‘,

限制文件大小     0为不限制

 ‘fileTypeDesc‘ : ‘Any old file you want...‘,

文件类型下拉框    

‘fileTypeExts‘ : ‘*.gif; *.jpg; *.png‘,

上传文件的类型  

  ‘formData‘      : {‘someKey‘ : ‘someValue‘, ‘someOtherKey‘ : 1}

向后台发送Json数据

 ‘multi‘    : false,

 false为单个上传  true多文件上传

 ‘queueSizeLimit‘ : 5,

 最多同时上传5

 ‘removeTimeout‘ : 10,

上传完成后  10秒钟从队列中移除

‘requeueErrors‘: true   

如果上传错误 将重新上传

 ‘successTimeout‘ : 5,

等待服务器响应时,超过5  假设上传成功

‘onCancel‘ : function(file) {

            alert(‘The file ‘ + file.name + ‘ was cancelled.‘);

        }

从队列中删除一个文件时触发

‘onClearQueue‘ : function(queueItemCount) {

            alert(queueItemCount + ‘ file(s) were removed from the queue‘);

        }

取消上传时触发

‘onDialogClose‘  : function(queueData) {

            alert(queueData.filesQueued + ‘ files were queued of ‘ + queueData.filesSelected + ‘ selected files. There are ‘ + queueData.queueLength + ‘ total files in the queue.‘);

        }

当选择文件窗口关闭时触发

‘onDialogOpen‘ : function() {

            $(‘#message_box‘).html(‘The file dialog box was opened...‘);

        }

当选择文件窗口打开时触发

<input type="file" name="file_upload" id="file_upload" />

<a href="javascript:$(‘#file_upload‘).uploadify(‘disable‘, true);">Disable Uploadify</a>

 ‘onDisable‘ : function() {

            alert(‘You have disabled Uploadify!‘);

        }

使上传按钮失效,失效触发onDisable

<input type="file" name="file_upload" id="file_upload" />

<a href="javascript:$(‘#file_upload‘).uploadify(‘disable‘, false);">Enable Uploadify</a>

‘onEnable‘ : function() {

            alert(‘You can use Uploadify again.‘);

        }

使上传按钮生效,生效触发onEnable

 ‘onFallback‘ : function() {

            alert(‘Flash was not detected.‘);

        }

引发了在初始化期间如果没有检测到一个兼容的版本的Flash浏览器。

‘onInit‘   : function(instance) {

            alert(‘The queue ID is ‘ + instance.settings.queueID);

        }

Uploadify初始化完成时

‘onQueueComplete‘ : function(queueData) {

            alert(queueData.uploadsSuccessful + ‘ files were successfully uploaded.‘);

        }

上传成功时触发

uploadsSuccessful

成功地完成了上传的数量

uploadsErrored

上传的数量返回一个错误

  ‘onSelect‘ : function(file) {

            alert(‘The file ‘ + file.name + ‘ was added to the queue.‘);

        }

选中文件  单击保存之后触发

如果选中多个文件会多次触发

 ‘onSelectError‘ : function() {

            alert(‘The file ‘ + file.name + ‘ returned an error and was not added to the queue.‘);

        }

返回的错误代码。 可以使用以下常量在确定错误代码:

QUEUE_LIMIT_EXCEEDED -文件数量选择将队列的大小通过设置的限制。

FILE_EXCEEDS_SIZE_LIMIT——文件的大小超过了设定的限制。

ZERO_BYTE_FILE——文件没有大小。

INVALID_FILETYPE——文件类型不匹配的文件类型的限制。

‘onUploadError‘ : function(file, errorCode, errorMsg, errorString) {

            alert(‘The file ‘ + file.name + ‘ could not be uploaded: ‘ + errorString);

        }

上传错误时触发 

file

上传的文件对象

errorCode

返回的错误代码

errorMsg

返回的错误消息

errorString

人类可读的错误消息包含所有的细节错误

 <div id="progress"></div>

 

‘onUploadProgress‘ : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {

            $(‘#progress‘).html(totalBytesUploaded + ‘ bytes uploaded of ‘ + totalBytesTotal + ‘ bytes.‘);

        }

file

上传的文件对象

bytesUploaded

已经上传的字节数 单个文件

bytesTotal

文件的字节总数   单个文件   totalBytesUploaded  

已经上传的字节数   全部文件

totalBytesTotal

文件的总字节数    全部文件

‘onUploadStart‘ : function(file) {

            alert(‘Starting to upload ‘ + file.name);

        }

即将上传的对象

‘onUploadSuccess‘ : function(file, data, response) {

            alert(‘The file ‘ + file.name + ‘ was successfully uploaded with a response of ‘ + response + ‘:‘ + data);

        }

file
 成功上传文件对象

data
 服务器端脚本返回的数据(

response

到底上传成功了没有如果成功为true

 

 

    });

});

 

    </script>

Uploadify 笔记分享 -- 2014年10月18日