强大的支持多文件上传的jQuery文件上传插件Uploadify

支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本
和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持
Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数
定制功能,如文件大小、文件类型、按钮图片定义、上传文件脚本等。

Flash版本使用方法:

1.加载JS和CSS

?





1

2

3

<script src="jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>

<script src="jquery.uploadify.min.js"
type="text/javascript"></script>

<link rel="stylesheet"
type="text/css"
href="uploadify.css">

2.编写HTML内容

<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

3.函数调用


<script type="text/javascript">
$(document).ready(function()
{
$("#file_upload").uploadify({
‘uploader‘: ‘uploadify.swf‘,
‘script‘: ‘UploadHandler.php‘,
‘folder‘: ‘UploadFile‘,
‘queueID‘: ‘fileQueue‘,
‘auto‘: true,
‘multi‘: true
});
});
</script>

4.更多参数配置详解

uploader : uploadify.swf
文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出
打开文件对话框,默认值:uploadify.swf。

script :   后台处理程序的相对路径
。默认值:uploadify.php

checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

method : 提交方式Post 或Get
默认为Post

scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain

folder :  上传文件存放的目录 。

queueID 
文件队列的ID,该ID与存放文件队列的div的ID一致。

queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999

multi : 设置为true时可以上传多个文件。

auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传

fileDesc 
这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设
置fileDesc为“请选择rar doc
pdf文件”

fileExt : 设置可以选择的文件的类型,格式如:‘*.doc;*.pdf;*.rar‘

sizeLimit : 上传文件的大小限制 。

simUploadLimit : 允许同时上传的个数 默认值:1

buttonText : 浏览按钮的文本,默认值:BROWSE

buttonImg : 浏览按钮的图片的路径 。

hideButton : 设置为true则隐藏浏览按钮的图片

rollover :
值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。

width : 设置浏览按钮的宽度 ,默认值:110。

height : 设置浏览按钮的高度 ,默认值:30。

wmode : 设置该项为transparent
可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页
面的最高层。 默认值:opaque 。

cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函
 数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作

onSelect :选择文件时触发,该函数有三个参数

event:事件对象。

queueID:文件的唯一标识,由6为随机字符组成。

fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type
5个属性。

代码如下:

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<script type="text/javascript">

$(document).ready(function()

{

    $("#uploadify").uploadify({

        ‘uploader‘: ‘JS/jquery.uploadify-v2.1.0/uploadify.swf‘,

        ‘script‘: ‘UploadHandler.ashx‘,

        ‘cancelImg‘: ‘JS/jquery.uploadify-v2.1.0/cancel.png‘,

        ‘folder‘: ‘UploadFile‘,

        ‘queueID‘: ‘fileQueue‘,

        ‘auto‘: false,

        ‘multi‘: true,

        ‘onInit‘:function(){alert("1");},

        ‘onSelect‘: function(e, queueId, fileObj)

        {

            alert("唯一标识:"
+ queueId + "\r\n"
+

                  "文件名:"
+ fileObj.name + "\r\n"
+

                  "文件大小:"
+ fileObj.size + "\r\n"
+

                  "创建时间:"
+ fileObj.creationDate + "\r\n"
+

                  "最后修改时间:"
+ fileObj.modificationDate + "\r\n"
+

                  "文件类型:"
+ fileObj.type

            );

        }

    });

});

</script>

  

onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象
有以下几个属性:

fileCount:选择文件的总数。

filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。

filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。

allBytesTotal:所有选择的文件的总大小。

onCancel: 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、
data四个参数,前三个参数同onSelect
中的三个参数,data对象有两个属性fileCount和allBytesTotal。

fileCount:取消一个文件后,文件队列中剩余文件的个数。

allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。

onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel
中的两个对应参数。

onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个
参数event和queueSizeLimit。

onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参
数同上,errorObj对象有type和info两个属性。

type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’

info:错误的描述

onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。
该函数有event、queueId、fileObj三个参数,参数的解释同上。

onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队
 列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。
data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed:

percentage:当前完成的百分比

bytesLoaded:当前上传的大小

allBytesLoaded:文件队列中已经上传完的大小

speed:上传速率 kb/s

onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数
同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed

fileCount:剩余没有上传完成的文件的个数。

speed:文件上传的平均速率 kb/s

注:fileObj对象和上面讲到的有些不太一样,onComplete
的fileObj对象有个filePath属性可以取出上传文件的路径。

onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,
分别为:

filesUploaded :上传的所有文件个数。

errors :出现错误的个数。

allBytesLoaded :所有上传文件的总大小。

speed :平均上传速率 kb/s

强大的支持多文件上传的jQuery文件上传插件Uploadify,布布扣,bubuko.com

时间: 2024-10-01 19:47:56

强大的支持多文件上传的jQuery文件上传插件Uploadify的相关文章

支持多文件上传的jQuery文件上传插件Uploadify

支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法: 1.加载JS和CSS ? 1 2 3 <script src="jquery/1.7.1/jquery.min.js

MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new {enctype = "multipart/form-data"}) {)%> <input name ="uploadFile" t

iOS开发-AFNetworking参数和多文件同时上传【多文件上传】

1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数.多张图片和音频: 2. 功能实现 在实现此功能之前,需要引入第三方AFNetworking,这是一个非常强大的网络开发工具,这里我就不多说了,下面是我用此工具,封装的一个同时上传参数和多个文件的方法: 2.1 方法名 /** 多文件上传,支持同时上传参数.多个图片.多个音频,[需要将每一个文件转化为

大数据技术之_18_大数据离线平台_02_Nginx+Mysql+数据收集+Web 工程 JS/JAVA SDK 讲解+Flume 故障后-如何手动上传 Nginx 日志文件至 HDFS 上

十一.Nginx11.1.介绍11.2.常见其他 Web 服务器11.3.版本11.4.Nginx 安装11.5.目录结构11.6.操作命令十二.Mysql12.1.介绍12.2.关系型数据库(SQL)种类12.3.特征12.4.术语12.4.与非关系型数据库比较(Not Only SQL)12.4.1.种类12.4.2.特征12.4.3.总结十三.数据收集13.1.收集方式13.2.数据的事件类型13.2.1.Launch 事件13.2.2.PageView 事件13.3.Nginx 日志收集

***使用PHP实现文件上传和多文件上传

http://www.365mini.com/page/php-upload-file.htm 在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言中简单得多.下面我们结合具体的代码实例来详细介绍如何通过PHP实现文件上传和多文件上传功能. 要使用PHP实现文件上传功能,我们先来编写两个php文件:index.php和upload.php.其中,index.php页面用于提交文件上传的表单请求,u

C#对.CSV格式的文件--逗号分隔值 的读写及上传ftp服务器操作方法总结

前言 公司最近开发需要将数据保存到.csv文件(逗号分隔值 )中然后上传到ftp服务器上,供我们系统还有客户系统调用,之前完全没有接触过这个,所以先来看看百度的解释:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据.CSV文件由任意数目的记录组成,记录间以某种换行符分隔:每条记录由字段组成,字段间的分隔符是其它字

LOADRUNNER上传及下载文件

(1)LoadRunner上传文件 web_submit_data("importStudent.do", "Action=https://testserver/console/importStudent.do", "Method=POST", "EncType=multipart/form-data", "RecContentType=text/html", "Referer=https://t

【转】每天一个linux命令(26):用SecureCRT来上传和下载文件

原文网址:http://www.cnblogs.com/peida/archive/2012/11/28/2793181.html 用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem. 文件传输协议: 文件传输是数据交换的主要形式.在进行文件传输时,为使文件能被正确识别和传送,我们需要在两台计算机之间建立统一的传输协议.这个协议包括了文件的识别.传送的

使用html中的&lt;input&gt;标签上传多个文件(转)

如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"html input file multiple",终于在stackoverflow找到一个文章:http://stackoverflow.com/questions/1175347/how-can-i-select-and-upload-multiple-files-with-html-and-ph