uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
现在最新版为3.2.1。
在线实例
实例预览 Uploadify 在线实例Demo演示
实例中用到的php文件UploaderDemo.php请在页面下方下载
引入文件
- <link rel="stylesheet" type="text/css" href="uploadify.css" />
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript" src="jquery.uploadify.js"></script>
复制
使用方法
- <form>
- <div id="queue"></div>
- <input id="file_upload" name="file_upload" type="file" multiple="true">
- </form>
- <div id="uploadfiles"></div>
- <div id="fileQueue" style="clear:both"></div>
复制
- <script type="text/javascript">
- var timestamp = new Date().getTime();
- var token = Math.floor(Math.random() * 1000) + timestamp;
- $(function() {
- $('#file_upload').uploadify({
- 'buttonText': '选择文件..',
- 'fileObjName': 'simplefile',
- 'method': 'post',
- 'multi': true,
- 'queueID': 'fileQueue',
- //'uploadLimit': 2,
- 'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
- 'buttonImage': '/static/js/uploadify/select.png',
- 'formData': {
- 'timestamp': timestamp,
- 'token': token
- },
- 'swf': '/static/js/uploadify/uploadify.swf',
- 'uploader': '/static/php/UploaderDemo.php',
- 'onUploadStart': function() {
- $imgHtml = '<img class="upload_load" src="/static/images/upload.gif" align="absmiddle" />';
- $('#uploadfiles').append($imgHtml);
- },
- 'onUploadSuccess': function(file, data, response) {
- $('.upload_load').remove();
- var json = $.parseJSON(data);
- if (json.state == 'success') {
- $imgHtml = '<span id="file_' + json.file_id + '">';
- $imgHtml += '<a href="' + json.file + '" target="_blank">';
- $imgHtml += '<img src="' + json.file + '" width="100" height="100" align="absmiddle"/>';
- $imgHtml += '</a>';
- $imgHtml += '<a href="javascript:uploadifyRemove("' + json.file + '")">删除</a>';
- $imgHtml += '</span>';
- $($imgHtml).appendTo('#uploadfiles');
- } else {
- alert(json.message);
- }
- },
- 'onQueueComplete': function() {
- $('.upload_load').remove();
- }
- });
- });
- </script>
复制
参数说明
属性名称 | 默认值 | 说明 |
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 | 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 | 设置哪些事件可以被重写,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对象包含如下属性:
|
onDialogOpen() | 当文件选择对话框弹出时立即出发,但可能在文件选择对话框被关闭之前并不能全部执行。 |
onDisable() | 当disable方法禁用Uploadify上传按钮时被调用时触发。 |
onEnable() | 当disable方法启用Uploadify上传按钮时被调用时触发。 |
onFallback() | 当Uploadify初始化过程中检测到当前浏览器不支持flash时触发。 |
onInit() | 首次初始化Uploadify结束时触发。 |
onQueueComplete(queueData) |
文件上传队列处理完毕后触发。 queueData对象包含如下属性:
|
onSelect(file) |
选择文件后向队列中添加每个上传任务时都会触发。 |
onSelectError(file, errorCode, errorMsg) |
选择文件后向队列中添加每个上传任务时如果失败都会触发。 file – 文件对象 errorCode – 错误代码如下:
errorMsg – 错误提示,可通过’this.queueData.errorMsg’定制 |
onSWFReady() | Flash文件载入成功后触发。 |
onUploadComplete(file) | 每个文件上传完毕后无论成功与否都会触发。 |
onUploadError(file, errorCode, errorMsg, errorString) | 文件上传出错时触发,参数由服务端程序返回。 |
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) |
处理上传队列的过程中会多次触发此事件,每当任务状态有更新时都会触发。
|
onUploadStart(file) | 当文件即将开始上传时立即触发 |
onUploadSuccess(file, data, response) |
当文件上传成功时触发
|
方法名称 | 说明 | 应用举例 |
cancel(fileID, suppressEvent) |
取消队列中的任务,不管此任务是否已经开始上传
|
复制
|
destroy() | 销毁Uploadify实例并将文件上传按钮恢复到原始状态 |
复制
|
disable(setDisabled) |
禁用或启用文件浏览按钮 setDisabled – 设置为true表示禁用,false为启用 |
复制
|
settings(name, value, resetObjects) |
获取或设置Uploadify实例参数
|
复制
|
stop() | 停止当前正在上传的任务 |
复制
|
upload(fileID) | 立即上传指定的文件,如果fileID为’*'表示上传所有文件,要指定上传多个文件,则将每个文件的fileID作为一个参数 |
复制
|
相关推荐
HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。...支持多文件上传 2.带进度条 3.可以显示文件名称 4.可以实时显示已上传的大小 5.可以从队列中删除 6.各元素的样式都可以自己控制
**jQuery Uploadify 文件上传控件详解** 在网页开发中,文件上传功能是非常常见且重要的一个环节。jQuery Uploadify是一款高效、易用的jQuery插件,它使得文件上传变得更加直观和用户体验友好。本篇文章将深入探讨...
本文主要介绍了jQuery uploadify文件上传插件的使用方法,uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。具有很好的参考价值,需要的朋友一起来看下吧
文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...
这个是从别处copy来的代码,觉得很有用,就拿来分享了,支持进度条显示,取消上传,但是不支持删除,删除需要自己添加。 该上传是采用servlet来做的,如果你的工程用了struts拦截器,而且拦截的是/*,那你在上传的...
**jQuery Uploadify与Java文件上传** 在Web开发中,文件上传功能是不可或缺的一部分。`jQuery Uploadify`是一款基于JavaScript和jQuery的插件,它提供了一种优雅的方式来进行多文件上传,具有良好的用户体验和丰富...
jQuery Uploadify文件批量上传实例 自己对jQuery Uploadify插件稍作整理,样式不合适可以根据自己的需要修改; 可以实现多文件上传,同时显示上传进度条和百分比,上传完毕后将统计上传文件的总数量、文件总大小和...
jQuery Uploadify是一款基于jQuery的文件上传组件,它提供了丰富的自定义选项和事件,支持多文件选择、预览、进度条显示等功能。用户可以选择多个文件并一次性上传,同时提供进度反馈,增强用户体验。其主要特性包括...
《jQuery Uploadify 多文件上传实现与API详解》 在当今的Web开发中,用户对交互性和用户体验的要求越来越高,其中,文件上传功能是不可或缺的一部分。jQuery Uploadify是一款强大的JavaScript插件,它允许用户进行...
《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...
《jQuery.uploadify v2.1.4:中文友好修正版》 在Web开发中,上传功能是不可或缺的一部分,而jQuery.uploadify插件以其强大的功能...如果你的项目需要处理中文文件上传,那么这个修正版的jQuery.uploadify值得你考虑。
`jQuery Uploadify`是一个开源的文件上传组件,它通过异步方式实现多文件上传,提高了用户体验。它支持预览、取消上传、限制文件类型和大小等功能,特别适合在Web应用中处理图片、文档等文件上传。 ### 2. 安装与...
在Web开发中,文件上传是一项常见的功能,而jQuery Uploadify插件因其简洁的API和强大的功能,成为众多开发者首选的批量上传解决方案。尤其是其支持中文版本,更是方便了中文用户进行操作。本文将深入解析jQuery ...
`jQuery Uploadify`是一个流行的JavaScript库,它允许用户在Web应用中实现多文件上传功能。这个教程将深入讲解如何结合`jsp`(JavaServer Pages)、`servlet`以及`jQuery`的最新版本来创建一个高效的文件上传系统。 ...
而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...
至此,我们就完成了PHP和jQuery Uploadify文件上传的基本配置。在实际应用中,您可能需要根据项目需求调整上传限制、文件存储位置、错误处理等细节。Uploadify提供丰富的自定义选项,可以根据需要进行配置,以满足...
jQueryUpLoadify是一款基于jQuery的文件上传插件,它与.NET 4.0框架结合,提供了高效、便捷的批量文件上传功能。这个插件在Web开发中被广泛使用,因为它可以极大地改善用户交互体验,使得文件上传过程变得更加直观和...
`jQuery Uploadify` 是一个基于 jQuery 的插件,专为实现多文件上传功能而设计。它以其简洁的界面和强大的功能深受开发者喜爱,可以方便地在网页中创建优雅的多文件上传界面。下面我们将深入探讨 `jQuery Uploadify`...
总结起来,通过以上步骤,你可以实现一个基于Java和Struts2的jQuery uploadify文件上传功能,并解决中文乱码问题。在实际项目中,你可能还需要考虑其他因素,如文件大小限制、错误处理、存储策略等。希望这篇文章能...
**jQuery Uploadify** 是一个基于jQuery的文件上传插件,它允许用户在Web应用程序中实现异步、批量或单个文件上传功能。该插件以其易用性、自定义性和高性能而受到开发者们的欢迎。在描述中提到,可能有些初学者在...