jquery 批量上传 jquery多文件上传插件

转载

mob6454cc6575fa 2023-09-05 11:07:24

文章标签 jquery 批量上传 javascript php 后端 ViewUI 文章分类 jQuery 前端开发

Uploadify是JQuery的一个上传插件，带进度显示, 支持多文件上传。不过官方提供的实例时php版本的

Uploadify唯一的缺点就是不支持中文按钮

官方下载官方文档官方演示

实现

Uploadify实现最低要求:

jQuery 1.4.x or greater swfObject 2.2 or greater Flash Player 9.0.24 or greater

所需文件

cancel.png jquery.uploadify.v2.1.4.min.js jquery-1.4.2.min.js swfobject.js uploadify.css uploadify.php uploadify.swf

基本代码

<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function() {
      $('#file_upload').uploadify({
        'uploader'  : '/uploadify/uploadify.swf',
        'script'    : '/uploadify/uploadify.php',
        'cancelImg' : '/uploadify/cancel.png',
        'folder'    : '/uploads',
        'auto'      : true
      });
    });
    // ]]>
    </script>

* 确保你有上传的文件夹的写入权限.

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

<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

主要参数

示例:

$(document).ready(function() {
	$('#fileInput1').fileUpload({
		'uploader': 'uploader.swf',//不多讲了
		'script': '/AjaxByJQuery/file.do',//处理Action
		'cancelImg': 'cancel.png',	
		'folder': '',//服务端默认保存路径
		'scriptData':{'methed':'uploadFile','arg1','value1'},
		//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
		'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
		//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
		'multi':'true',//多文件上传开关
		 'fileExt':'*.xls;*.csv',//文件过滤器
		'fileDesc':'.xls',//文件过滤器 详解见文档
	   'onComplete' : function(event,queueID,file,serverData,data){ 
			//serverData为服务器端返回的字符串值
			alert(serverData);
		 }
	});
});

uploadify函数的参数为json格式，可以对json对象的key值的修改来进行自定义的设置，如multi设置为true或false来控制是否可以进行多文件上传，下面就来介绍下这些key值的意思：

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一致。进度条放置的位置

jquery 批量上传 jquery多文件上传插件_jquery 批量上传

queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。

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

jquery 批量上传 jquery多文件上传插件_ViewUI_02

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 ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：

jquery 批量上传 jquery多文件上传插件_后端_03

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

onInit : 做一些初始化的工作。

onSelect ：选择文件时触发，该函数有三个参数

event:事件对象。 queueID：文件的唯一标识，由6为随机字符组成。 fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。

$(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
            );

        }
    });
});

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

$('#file_upload').uploadify({
  'uploader'    : '/uploadify/uploadify.swf',
  'script'      : '/uploadify/uploadify.php',
  'cancelImg'   : '/uploadify/cancel.png',
  'folder'      : '/uploads',
  'multi'       : true,
  'onComplete'  : function(event, ID, fileObj, response, data) {
	  alert('There are ' + data.fileCount + ' files remaining in the queue.');
	}
});

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

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

filesUploaded :上传的所有文件个数。 errors ：出现错误的个数。 allBytesLoaded ：所有上传文件的总大小。 speed ：平均上传速率 kb/s

$('#file_upload').uploadify({
      'uploader'      : '/uploadify/uploadify.swf',
      'script'        : '/uploadify/uploadify.php',
      'cancelImg'     : '/uploadify/cancel.png',
      'folder'        : '/uploads',
      'onAllComplete' : function(event,data) {
          alert(data.filesUploaded + ' files uploaded successfully!');
        }
    });

在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：

uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码

$('#uploadify').uploadifySettings('folder','JS');

如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上传</a>
uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。

$('#uploadify').uploadifyCancel(id);

常见错误:

1.文件大小超了.

<configuration>
			<system.web>
                <httpRuntime maxRequestLength="102400" executionTimeout="3600" />
			</system.web>
    </configuration>

2.Session 获取不到 Flash在IE下会把当前页面的Cookie发到Upload.ashx，但是Chrome、Firefox下则不会把当前页面的Cookie发到Upload.ashx。因为Session是靠Cookie中保存的SessionId实现的（传智播客的ASP.Net视频教程中讲到了Session和Cookie的关系，对于这点不熟悉的可以参考《传智播客视频教程2011版：ASP.NET≠拖控件》），这样由于当前页面的Cookie不会传递给Flash请求的Upload.ashx，因此请求的文件发送到Upload.ashx就是一个新的Session了，当然这个Session就是没有登录的了。解决这个问题的思路也很简单，那就是手动把SessionId传递给服务器，再服务器端读出SessionId再加载Session。

在Global.asax的Application_BeginRequest中添加如下代码

#region 上传组件
        void Application_BeginRequest(object sender, EventArgs e)
        {
            //flash 上传组件Session 值恢复
            //'scriptData': { 'ASPSESSID': '<%=Session.SessionID %>' }
            try
            {
                string session_param_name = "ASPSESSID";
                string session_cookie_name = "ASP.NET_SESSIONID";

                if (HttpContext.Current.Request.Form[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
                }
            }
            catch (Exception ex)
            {
                //Response.StatusCode = 500;
                //Response.Write("Error Initializing Session");
            }
            //如果网站中还用到了Membership的FormsAuthentication验证，则还需要把AUTHID也按照SessionID的方法进行处理
            //'scriptData': {"ASPSESSID": "<%=Session.SessionID %>","AUTHID" : "<%=Request.Cookies[FormsAuthentication.FormsCookieName].Value%>"}
            try
            {
                string auth_param_name = "AUTHID";
                string auth_cookie_name = FormsAuthentication.FormsCookieName;

                if (HttpContext.Current.Request.Form[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
                }

            }
            catch (Exception ex)
            {
                //Response.StatusCode = 500;
                //Response.Write("Error Initializing Forms Authentication");
            }
        }
        void UpdateCookie(string cookie_name, string cookie_value)
        {
            HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
            if (cookie == null)
            {
                cookie = new HttpCookie(cookie_name);
                HttpContext.Current.Request.Cookies.Add(cookie);
            }
            cookie.Value = cookie_value;
            HttpContext.Current.Request.Cookies.Set(cookie);
        }
        #endregion

后端接收代码

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
                context.Response.Write("上传成功!");
            }
            else
            {
                context.Response.Write("0");
            }
        }

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。