一款基於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;
            }
        }
    }
}

這樣就好了

實現效果：