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是一款广泛应用于Web开发中的JavaScript文件上传插件，它为用户提供了一种高效、便捷的文件上传体验。这款插件以其简洁的API和高度自定义的特性，深受开发者喜爱。在本文中，我们将深入探讨Uploadify的核心...
本文主要介绍了jQuery uploadify文件上传插件的使用方法，uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。具有很好的参考价值，需要的朋友一起来看下吧
"uploadify"是一款广泛使用的JavaScript插件，它使得多文件上传变得简单而高效。本示例代码是关于如何使用uploadify在Java环境中（通过jsp和servlet）实现多文件上传的一个实例。 首先，uploadify是一个基于jQuery...
总的来说，Uploadify是一个强大的文件上传解决方案，它使得在Web应用中实现高效、友好的文件上传功能变得轻松简单。尽管在使用过程中可能会遇到一些问题，但通过查阅官方文档和社区资源，大多数问题都能得到解决。...
Uploadify是一款广泛应用于Web开发中的异步文件上传插件，它极大地优化了用户在网站上上传文件的体验。异步上传技术使得文件上传无需等待整个文件传输完成即可继续执行其他操作，提高了交互效率，减轻了服务器压力。...
Uploadify 是一个流行...综上所述，Uploadify是一个强大的文件异步上传工具，它可以被用来增强像QQ邮箱这样的服务，提供更流畅的文件上传体验。通过了解其工作原理和配置，开发者可以将其无缝集成到自己的应用程序中。
Uploadify是一款基于Flash和jQuery的多文件上传插件。尽管Flash在某些现代浏览器中逐渐被淘汰，但在处理文件上传时，其跨平台和兼容性优势依然明显。Uploadify通过创建一个隐藏的Flash对象，能够模拟多选文件上传，...
在.NET开发中，文件上传是一项常见的任务，而jQuery Uploadify插件则为这一过程提供了便捷的解决方案。Uploadify是一款基于JavaScript和Flash的文件上传组件，它允许用户通过拖拽或选择文件的方式，实现多文件同时...
Uploadify是一款广泛应用于Web开发中的前端文件上传插件，它支持多文件选择、批量上传、进度条显示等功能，极大地优化了用户在网页上上传文件的体验。本文将深入探讨Uploadify的工作原理、主要特点以及如何在项目中...
在本示例中，我们将关注"JSP使用文件上传插件uploadify"的主题，这是一个利用uploadify插件实现AJAX文件上传的教程。uploadify是一款流行且美观的JavaScript插件，它为网页提供了流畅的多文件上传体验。 首先，我们...
《jQuery文件上传插件jQuery.uploadify.js：跨越浏览器限制的智能解决方案》 在Web开发中，文件上传功能是一项常见的需求，而jQuery.uploadify.js是一款高效且用户友好的文件上传插件，尤其对于需要兼容多种浏览器...
Uploadify 是一个基于jQuery的开源文件上传插件，它通过异步方式上传文件，提供用户友好的界面和多种自定义选项。Uploadify 支持多种浏览器，包括IE6+、Firefox、Chrome、Safari 和 Opera。 2. **多文件上传** ...
Uploadify是一款广受欢迎的jQuery插件，主要用于实现网页上的文件上传功能。它的版本3.2在当时具有较高的稳定性和良好的用户交互体验，因此备受开发者喜爱。在这个教程中，我们将深入探讨Uploadify 3.2的核心特性、...
Uploadify是一款流行的多文件上传插件，它允许用户在网页上批量上传文件，同时具有良好的浏览器兼容性。这个插件对于那些需要在网站上实现高效、便捷文件上传功能的开发者来说，是一个非常实用的工具。在本文中，...
在本文中，我们将深入探讨如何在ASP.NET MVC4框架下，利用JQuery Dialog插件创建一个弹出对话框，并在其中集成Uploadify组件实现多文件上传功能。这将涉及前端JavaScript库、后端C#处理逻辑以及数据库交互，旨在提供...
这个实例展示了如何在项目中有效地集成Uploadify，以提供用户友好的文件上传体验。以下是对Uploadify批量上传实例的详细解读： 1. **Uploadify介绍**： Uploadify是一个基于Flash和jQuery的开源文件上传组件，它...
总的来说，jQuery Uploadify是一个强大且易于使用的多文件上传解决方案，它可以帮助开发者轻松实现文件上传功能，同时提供了丰富的定制选项以满足不同的需求。无论你是新手还是经验丰富的开发者，都能从这个插件中...
Uploadify是一款基于Flash和JavaScript的前端文件上传插件，它提供了用户友好的界面，支持多文件选择、进度条显示以及断点续传等功能。在C#后端，我们可以处理接收到的文件，进行存储、验证或者处理其他业务逻辑。 ...