多圖檔上傳并預覽

js相關代碼

一種是form表單送出，一種是base64 

//多檔案上傳
function fileClick() {
    //在input file内容改變的時候觸發事件
    $('#filed').change(function () {
        if ($('.trphoto td img').length === 3) {
            alert("至多隻能上傳3張圖檔!請先點選圖檔删除!"); return
        }
        //擷取input file的files檔案數組;
        //$('#filed')擷取的是jQuery對象，.get(0)轉為原生對象;
        //這邊預設隻能選一個，但是存放形式仍然是數組，是以取第一個元素使用[0];
        var file = $('#filed').get(0).files[0];
        var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
        if (!pattern.test(file.type)) {
            alert("系統僅支援jpg/jpeg/png/gif/bmp格式的照片！");
            //file.focus();
            return;
        }
        //debugger
        $("#mmzpfile").ajaxSubmit({
            url: "JZ_ZY_ZZ_UPDATE.aspx",
            type: "post",
            data: { "action": "upfile_IMG" },
            resetForm: "true",
            beforSubmit: function () {
            },
            success: function (msg) {
                $(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"點選圖檔删除\" src=\"" + msg + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
                $(".trphoto").show()
                BAMMZP += msg + "|"
            }
        })

        //建立用來讀取此檔案的對象
        //var reader = new FileReader();
        使用該對象讀取file檔案
        //reader.readAsDataURL(file);
        讀取檔案成功後執行的方法函數
        //reader.onload = function (e) {
        //    //讀取成功後傳回的一個參數e，整個的一個進度事件
        //    //console.log(e);
        //    //選擇所要顯示圖檔的img，要指派給img的src就是e中target下result裡面
        //    //的base64編碼格式的位址
        //    //debugger
        //    $(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"點選圖檔删除\" src=\"" + reader.result + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
        //    $(".trphoto").show()
        //    BAMMZP += reader.result + "|"
        //}
    })

}

function zzxximg(thiss) {
    if (confirm("确認删除嗎")) {
        var hcnr = $(thiss).attr("src");
        //var RYHCID = $("#RYHCID").val();
        //var HCBT = $(thiss).parent().parent().children().eq(0).html();
        $(thiss).remove();
        BAMMZP = BAMMZP.replace(hcnr + "|", "");
    }
}
           

html

<!--門面照片-->
            <tr class="mmzp">
              <td class="zuzhi-tabletd" colSpan="2">
                <span style="color:red">*</span>門面照片
              </td>
              <td class="zuzhi-tabletd" colSpan="2">
                <form id="mmzpfile">
                  <div id="pox">
                    <input type="file" id="filed" name="files"  class="file" accept="image/*"/>
                  </div>
                </form>
              </td>
            </tr>
           

背景cs

if (action == "upfile_IMG")
                {
                    System.Web.HttpPostedFile file = context.Request.Files["files"];
                    string colname = UploadPicture(file, context);
                    SYS_LOG.Log(context, Entity.Operation.上傳圖檔, "保安從業機關上傳圖檔");
                    return colname;
                }
           

/// <summary>
        /// 上傳圖檔
        /// </summary>
        /// <param name="file"></param>
        /// <param name="context"></param>
        /// <returns></returns>
        private string UploadPicture(System.Web.HttpPostedFile file, System.Web.HttpContext context)
        {
            try
            {
                string action = context.Request["action"];
                if (file == null)
                {
                    return "請上傳檔案！";
                }
                string FileName = Path.GetFileName(file.FileName);
                string Extension = Path.GetExtension(FileName);
                //判斷檔案類型
                if (action == "upfile_IMG")
                {
                    //判斷是否為圖檔檔案
                    if (!Extension.Equals(".png") && !Extension.Equals(".jpg"))
                    {
                        string url = "請選擇圖檔檔案（*.png,*.jpg）";
                        return url;
                    }
                }
                int ContentLength = file.ContentLength;
                if (ContentLength > MaxSize)
                {
                    return "檔案的大小超過限制15M最大上傳15M以内的檔案！";
                }

                //建立檔案夾
                String Folder = "NewFile";
                String Dates = DateTime.Now.ToString("yyyyMMdd");
                String MapPath = context.Server.MapPath("~/");

                MapPath += Folder + "\\";

                String MapPathtwo = "";
                MapPathtwo = MapPath + Dates + "\\";

                if (!Directory.Exists(MapPathtwo))
                {
                    Directory.CreateDirectory(MapPathtwo);
                }

                string FileNameWithOutExtension = Path.GetFileNameWithoutExtension(FileName);

                FileNameWithOutExtension += "_" + DateTime.Now.ToString("yyyyMMddHHmss");
                string newFileName = FileNameWithOutExtension + Extension;

                //上傳檔案
                file.SaveAs(MapPathtwo + newFileName);

                string HJSQ = Folder + "/" + Dates + "/" + newFileName;

                if (action == "upfile_IMG")
                {
                    return HJSQ;
                }
                else
                {
                    return "";
                }

            }
            catch (Exception ex)
            {
                SYS_LOG.Log(context, Entity.Operation.上傳圖檔, "保安從業人員上傳圖檔-" + ex);
                return "上傳失敗";
            }
        }