uploadify是功能强大的文件上传插件,基于jquery实现.官方网站是www.uploadify.com共有两个版本,本次用的是免费版,收费版要5$.收费版功能要更加强大一些,会翻X墙的朋友可通过翻X墙来观看它网站上的DEMO演示.
全部插件已经放在附件中,以免甚至连其官方网站都访问不了的朋友下载不了源码,体积较小的是做了简单汉化的版本.
以下是使用方法:
首先为其提供显示位置
<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文件引进来.
/**
官方网站www.uploadify.com
目前没有找到多个文件同时上传的方法，可能付费的才有这功能
**/
$(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',//允许的上传文件类型，默认情况下文件选择页面不会显示非列表中的其它类型的文件
'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},//每个文件上传时一块传给后台的参数，可用“onUploadStart“事件为其动态赋值
'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': 从队列中取消一个文件或者一个正在上传中的文件
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' 属性不可被替换
例:
<a href="javascript:changeBtnText()">Change the Button Text</a>
<a href="javascript:returnBtnText();">Read the Button</a>
function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','BROWSE');
}
function returnBtnText() {
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
'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;
}里设置的背景图片是上传队列中的X图标,请自己修改路径以免显示不出来.
分享到：
好
相关推荐
jsp使用uploadify插件实现文件上传的示例，测试时将uploadify 直接导入myeclipse就能用了。 uploadify是一个与jquery和flash结合实现的上传程序，界面挺漂亮，用起来也方便，不过浏览器需要安装有Flash插件，好像...
非常漂亮使用的uploadify文件上传组建，实现了ajax文件上传，供大家一起学习。
完整的对于java使用uploadify插件实现多文件上传，很适合文件上传需求者直接拷贝使用
Uploadify-3.2.1 jQuery文件上传插件，使用uploadify组件可以实现异步无刷新多文件上传功能。
JSP使用文件上传插件uploadify ,内附带最新版本的uploadify。欢迎学习交流。本文章地址http://blog.csdn.net/tianba8/article/details/9953383，欢迎交流学习。
完整的对于java使用uploadify插件实现多文件上传及控制上传进度显示，取消上传等功能的demo项目包，很适合文件上传需求者直接拷贝使用
JQuery 上传插件Uploadify使用2 多文件上传
本文主要介绍了jQuery uploadify文件上传插件的使用方法，uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。具有很好的参考价值，需要的朋友一起来看下吧
jQuery上传插件Uploadify使用详解
很多的朋友都有遇到Jquery uploadify图片上传插件无法上传的情况，下面为大家介绍下不错的解决方法，感兴趣的朋友可以参考下
最近项目需要用到上传功能，上传功能要与邮箱里面的 添加附件 功能 一样，思来想去，最终确定用uploadify插件去做。好了，下面将详细讲解如何使用uploadify uploadify 其中有一个bug是，已经上传完成的文件，点击...
Uploadify 是一个非常好的jQuery文件上传插件，可以实现无刷新多文件上传，带进度显示，基于Flash与Ajax技术。我在Firefox 4.0.1 和 IE 9.0.8112 浏览器中使用，兼容性良好。使用许可是 MIT，免费开源且可自由地用于...
ASP.NET插件uploadify批量上传文件完整使用教程共11页.pdf.zip
uploadify批量上传文件完整使用教程，供大家参考，具体内容如下 1.首先准备uploadify的js文件，网上一搜一大堆 2.上传页面UpFilePage.aspx 关键代码： <html xmlns=http://www.w3.org/1999/xhtml> <head...
使用struts2和uploadify(2.1.4)开发的文件上传插件
最近调试成功了jquery下的uploadify文件上传，包括fileExt，onComplete，onAllComplete等参数使用，里边有个说明，详细介绍各参数。
后来朋友推荐了一个这个叫uploadify的上传插件，似乎挺好，就到官方下了个示例运行，感觉挺好，自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧： 1. 下载 官方网站：http://www.uploadify.com/ 直接下载...
Uploadifive是基于html5技术的文件上传jQuery插件，也是移动站点常用的文件上传插件之一。 提供的功能包括： 1，能够一次性选择多个文件上传，查看上传进度，控制文件上传类型和大小，为每一步操作添加回调函数等...
使用Jquery.uploadify上传文件。 jquery有很多插件，其中也有不少上传文件的插件，像ajaxfileupload.js、uploadify.js，不过网上的例子几乎全是php的，很郁闷，研究了半天，终于把uploadify用jsp版本弄出来了