C# 結合html5 批量上傳文件和圖片預覽

html5 新特性

<input id="imgsf" type="file" name="imgsf" multiple  />
input  file 中增加 multiple   屬性可以選擇多文件。IE9以下版本不兼容

<form id="form1" method="post" action="upload_json.ashx" enctype="multipart/form-data">
<div>
 <input id="imgsf" type="file" name="imgsf" multiple  />
    <input type="text" name="ceshi" value="panlitao" >
    <input type="submit" value="提交" />
</div>
</form>



//預覽js
<div id="imgrq">
    </div>
     <script type="text/javascript">

     $("#imgsf").change(function () {
         var filedx = 0;
         for (var i = 0, j = this.files.length; i < j; i++) {
             $("#imgrq").append("<img  src=\"" + window.URL.createObjectURL(this.files[i]) + "\" width=\"100\" height=\"100\" />");
         }


     });


</script>


C# 代碼
public class upload_json : IHttpHandler
    {
       // private HttpContext context;

    public void ProcessRequest(HttpContext context)
    {
        String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);


        //文件保存目錄路徑
        String savePath = "attached/";


        //文件保存目錄URL
        String saveUrl = aspxUrl + "attached/";


        //定義允許上傳的文件擴展名
        Hashtable extTable = new Hashtable();
        extTable.Add("image", "gif,jpg,jpeg,png,bmp");
        //extTable.Add("flash", "swf,flv");
        //extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
        //extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");


        //最大文件大小
        int maxSize = 1000000;
      //  this.context = context;
        String newFileName = "";
        for (int i = 0; i < context.Request.Files.Count;i++ )
        {
            HttpPostedFile imgFile = context.Request.Files[i];







            if (imgFile == null)
            {
                showError("請選擇文件。");
            }


            String dirPath = context.Server.MapPath(savePath);
            if (!Directory.Exists(dirPath))
            {
                showError("上傳目錄不存在。");
            }


            String dirName = context.Request.QueryString["dir"];
            if (String.IsNullOrEmpty(dirName))
            {
                dirName = "image";
            }
            if (!extTable.ContainsKey(dirName))
            {
                showError("目錄名不正確。");
            }


            String fileName = imgFile.FileName;
            String fileExt = Path.GetExtension(fileName).ToLower();


            if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
            {
                showError("上傳文件大小超過限制。");
            }




            //修改為文件流去判斷文件格式
            // string exPath = mall_bll.Common.isfilltype(stream: imgFile.InputStream).ToLower();


            //  if (exPath != "jpg" && exPath != "gif" && exPath != "bmp" && exPath != "png")
            //   { showError("上傳文件擴展名是不允許的擴展名。\n只允許" + ((String)extTable[dirName]) + "格式。"); }


            //if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1)
            //{
            //    showError("上傳文件擴展名是不允許的擴展名。\n只允許" + ((String)extTable[dirName]) + "格式。");
            //}


            //創建文件夾
            dirPath += dirName + "/";
            saveUrl += dirName + "/";
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }
            String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
            dirPath += ymd + "/";
            saveUrl += ymd + "/";
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }


             newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
            String filePath = dirPath + newFileName;


            imgFile.SaveAs(filePath);
        }
        String fileUrl = saveUrl + newFileName;


        Hashtable hash = new Hashtable();
        hash["error"] = 0;
        hash["url"] = fileUrl;
        context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
     //   context.Response.Write(JsonMapper.ToJson(hash));
        context.Response.End();
    }


    private void showError(string message)
    {
        Hashtable hash = new Hashtable();
        hash["error"] = 1;
        hash["message"] = message;
     //   context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
     //   context.Response.Write(JsonMapper.ToJson(hash));
   //     context.Response.End();
    }


    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}</pre>