一款基于uploadify扩展的多文件上传插件，彻底适用于Html5

http://www.uploadify.com/documentation/  官网里面有两个插件，一个是要使用flash插件才能文件上传的插件，另一个是不须要使用要flash插件的文件上传插件彻底支持和html5,可是它是要收费的，全部只能在它基础上本身去写一个插件来完成html5多文件上传。

接下来就是介绍写好了的插件用法，和官方用法是彻底同样的，能够去参考官方文档

 

插件使用以前须要引用js,css

    <script src="../../Scripts/pagekage/utils/Huploadify/jquery.js"></script><!--jquery库-->
    <link href="../../Scripts/pagekage/utils/Huploadify/Huploadify.css" rel="stylesheet" /> <!--主要css-->
    <script src="../../Scripts/pagekage/utils/Huploadify/jquery.Huploadify.js"></script><!--主要js-->

接下来就是写服务端代码，以及js一些配置。

js写法：

 var up = $('#upload').Huploadify({
                auto: false,
                fileTypeExts: '*.jpg;*.png',//设置上传文件的类型
                multi: true,
                fileSizeLimit:999999999,//// 容许上传的文件最大尺寸。若是设置为0则不限制，若是指定大小，能够为'100KB'，单位能够是'B','KB','MB'或'GB'
                showUploadedPercent: true,
                showUploadedSize: true,
                removeTimeout: 2000,
                uploader: '../../Uploadify.ashx',//服务端代码文件
                onUploadComplete: function (file) {
                    fileName += file.name +"?";
                    alert(file.name + '上传完成');
                },
                onCancel: function (file) {
                    console.log(file.name + '删除成功');
                },
                onSelect: function (file) {
                    console.log(file.name + '加入上传队列');
                },
                onQueueComplete: function (queueData) {
                    console.log('队列中的文件所有上传完成', queueData);
                }
            });

更多参数能够观看官方文档。

服务端代码：我这里用的是c#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace Uploadify
{
    /// <summary>
    /// Uploadify 的摘要说明
    /// </summary>
    public class Uploadify : IHttpHandler, IRequiresSessionState
    {

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

        /// <summary>
        /// 上传附件
        /// </summary>
        /// <param name="context"></param>
        private void upload(HttpContext context)
        {
            HttpPostedFile postedFile = context.Request.Files["file"];
            if (postedFile != null)
            {
                string fileName, fileExtension;
                int fileSize;
                fileName = postedFile.FileName;
                fileSize = postedFile.ContentLength;
                if (fileName != "")
                {

                    fileExtension = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.'));
                    string path = context.Server.MapPath("/") + "\\Huploadify\\";//设置文件的路径
                  //  string fileUrl = path + DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension;//保存文件路径
                  //  if (!Directory.Exists(path))
                  //  {
                  //      Directory.CreateDirectory(path);
                  //  }

                  string fileUrl=path+ fileName;
                    postedFile.SaveAs(fileUrl);//先保存源文件
                    context.Response.Write("上传成功！");

                }
                else
                {
                    context.Response.Write("上传失败！");
                }
            }
            else
            {
                context.Response.Write("上传失败！");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

这样就好了

实现效果：