uploadify文件上传插件用法介绍

使用方法:

首先为其提供显示位置

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

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

<p>

<a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|

<a href="javascript:$('#uploadify').uploadify('cancel','*’)">取消上传</a>

</p>

然后为其初始化,当然不要忘了把其js文件引进来

$(document).ready(function(){

$("#uploadify").uploadify({

'buttonText':'选择文件', //选择文件按钮显示的文字，默认是'SELECT FILES'

'buttonClass' : '', //选择文件按钮的样式,默认为空

'buttonCursor' : 'hand', //选择文件按钮的鼠标样式，可选'hand'和'arrow'，默认为'hand'

'buttonImage' : null, //选择文件按钮的图标,必须不设置buttonClass才起作用(待验证)

'checkExisting' : false, //指定服务器端的路径,以检查要上传的文件是否已经存在,默认值是false

'debug' : false, //是否开启DEBUG模式，默认为false

'fileObjName' : 'the_files', //文件属性名，后台可通过MultipartHttpServletRequest.getFile(name)来得到本文件(后台用的spring mvc,不同的后台请用各自的方法,事实上用InputStream流也可以读出来)

'fileSizeLimit' : '100MB', //限制文件大小，默认单位是KB。支持自己写单位，比如200B,300KB,400MB,500GB

'fileTypeDesc' :'', //The description of the selectable files. This string appears in the browse files dialog box in the file type drop down.

'fileTypeExts' : '*.gif; *.jpg; *.png',//允许的上传文件类型，默认情况下文件选择页面不会显示非列表中的其它类型的文件

'scriptData':{'parameter':$('#id').val()},//动态传参

'height':30,

'method' : 'post', //上传方式,可选'post'和'get',默认是'post'

'multi' : false, //是否可选择多个文件上传,可选true和false,默认是false

'overrideEvents' : [], //列出的事件,会不再以系统默认的设置起作用.写法为['onUploadProgress','onCancel'],默认为[]

'preventCaching':false, //可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突(待验证)

'progressData' : 'speed', //设置上传队列中显示的方式.speed 速度,percentage 百分比.默认值是percentage

'queueID' : 'fileQueue', //队列显示在哪个位置的ID,如果设置成false会生成一个随机的ID,默认值是false

'queueSizeLimit':999, //同时可在上传队列中的个数,默认值是999.本参数不能限制总上传的文件个数,如需要请用'uploadLimit'

'removeCompleted':false, //是否从上传列表中移除已经完成的文件,可选true和false

'removeTimeout' : 10, //如果设置成上传完成后移出队列,本参数来设置延迟多长时间(秒)移除.

'requeueErrors' : true, //如果上传出错,是否再次出现在队列中并上传.可选true和false,默认是false

'successTimeout': 10, //文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功

'swf': '${ctx}/js/uploadify-v3.1/uploadify.swf',//swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略

'uploader': 'fileUpload.do?action=upload',//服务器URL.本参数不可省略

'uploadLimit' : 999, //限制总上传文件数,默认是999

'width' :100, //选择文件按钮的宽度,不需要加上'px'字符

'auto': false, //是否自动上传,可选true和false

'onCancel':function(file){ //当取消一个上传队列中的文件时触发,通过再次选择同一个文件而替换掉原来选定的文件时不会触发

alert('文件'+file.name+'被取消了');

},

'onClearQueue':function(queueItemCount){//当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数

alert(queueItemCount+'个文件被取消了');

},

'onDestroy':function(){ //当destroy方法被调用时触发,没有传过来的参数.如<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadif</a>

alert('I am getting destroyed!');

},

'onDialogClose':function(queueData){//当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出

//queueData.filesSelected 在浏览文件时选中的文件个数

//queueData.filesQueued 被加入上传队列中的文件个数(本方法不会产生任何错误)

//queueData.filesReplaced 已有队列中,被替换的文件个数

//queueData.filesCancelled The number of files that were cancelled from being added to the queue 凑和看吧

//queueData.filesErrored 返回错误的文件个数

},

'onDialogOpen':function(){//当选择文件框被打开时触发,没有传过来的参数.<div id="message_box"></div>

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

},

'onDisable':function(){//当'desable'方法被调用时触发,没有传过来的参数.<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>

alert('You have disabled Uploadify!');

},

'onEnable':function(){//当'desable'方法被调用时触发,没有传过来的参数.<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>

alert('You have enabled Uploadify!');

},

'onFallback':function(){//Triggered during initialization if a compatible version of Flash is not detected in the browser.

alert('Flash was not detected.');

},

'onInit' : function(instance) {//当uploadify被第一次调用时，在最后调用完成时触发

//$("#uploadify").uploadify("settings", "width", 100); 不知道为什么本方法会报错

$("#uploadify").uploadify("settings", "buttonText", "测试settings方法");

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

},

'onQueueComplete':function(queueData){//当队列中的所有文件上传完成时触发,目前不清楚再添加文件完成时还会不会触发

//queueData.uploadsSuccessful 上传成功的文件个数

//queueData.uploadsErrored 返回错误的文件个数

},

'onSelect': function(file){//当文件从浏览框被添加到队列中时触发

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

},

'onSelectError' : function(file,errorCode,errorMsg) {

//errorCode QUEUE_LIMIT_EXCEEDED 队列已满(已达到限制数,不允许再添加)

//errorCode FILE_EXCEEDS_SIZE_LIMIT 文件大小超过了设置的最大值

//errorCode ZERO_BYTE_FILE 文件没有长度

//errorCode INVALID_FILETYPE 所选文件类型不符合限制的类型

//errorMsg *You can access a full error message using ‘this.queueData.errorMsg’ if you do not override the default event handler.

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

},

'onSWFReady' : function() {//当flash对象准备好的时候触发,没有传过来的参数

alert('The Flash file is ready to go.');

},

'onUploadComplete' : function(file) {//当一个文件上传完成时触发,不论是成功还是失败都会触发

alert('The file ' + file.name + ' finished processing.');

},

'onUploadError' : function(file, errorCode, errorMsg, errorString) {//当文件上传完成但是返回错误时触发

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

},

'onUploadSuccess' : function(file, data, response) {//每个上传完成并成功的文件都会触发本事件

//data The data that was returned by the server-side script (anything that was echoed by the file)

//response The response returned by the server—true on success or false if no response. If false is returned, after the successTimeout option expires, a response of true is assumed.

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

},

'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//Triggered each time the progress of a file upload is updated.

//bytesUploaded The number of bytes of the file that have been uploaded

//bytesTotal The total number of bytes of the file

//totalBytesUploaded The total number of bytes uploaded in the current upload operation (all files)

//totalBytesTotal The total number of bytes to be uploaded (all files)

$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');//<div id="progress"></div>

},

'onUploadStart' : function(file) {//在文件被上传前触发

$("#uploadify").uploadify("settings", "formData", {'someKey':'3333','kkk':'llll'});

alert('开始上传 ' + file.name);

}

/**

以下是可触发事件的方法

'cancel': 从队列中取消一个文件或者一个正在进行中的文件(不知道怎么翻译,Cancel a file from the queue or a file that is in progress.)

fileID 想要取消的文件ID.检索ID的最简单的方法是使用ID 属性( id attribute of the file queue item),但是怎么用不清楚.如果用'*'会取消队列中所有的文件,如果不指定ID,那么会取消第一个

suppressEvent 如果设置成true,那么onUploadCancel事件会被忽略.本方法经常被用来清空队列

例:

<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a>

<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>

'destroy': 销毁uploadify实例并返回到原始的状态

无参数

例:

<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>

'disable': 启用或者禁用'选择文件'按钮

setDisabled 想要禁用按钮请设置成true,相反设置成false

例:

<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a>

<a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>

'settings': 返回或修改一个 uploadify实例的settings值

name 想要改变或设置的值的名称,如果只写'name'，会返回与name对应的值

value 与name对应的值

resetObjects 如果设置成true,在更新postData对象时会替换掉原来的值,设置成false,会在原来值的基础上添加新的值.

注意: 'swf' 属性不可被替换

'stop': 停止当前的上传并添加到队列中去

无参数

例:

<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>

<a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>

'upload': 上传指定的文件或者所有队列中的文件

fileID 想要上传的文件ID.检索ID的最简单的方法是使用ID 属性( id attribute of the file queue item),但是怎么用不清楚.如果输入'*',所有队列中的文件都会被上传

例:

<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>

**/

});

});

在其默认css样式中

.uploadify-queue-item .cancel a {

background: url('/xticfc/js/uploadify-v3.1/uploadify-cancel.png') 0 0 no-repeat;

float: right;

height: 16px;

text-indent: -9999px;

width: 16px;

}