webform的原生操作圖片預覽和上傳

1.使用input標簽進行圖片操作，input的標簽有一個accept屬性，accept 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型，多個屬性值使用逗號分隔<input accept="audio/*,video/*,image/*">。 

如果想使用瀏覽器原生特性實現文件上傳(如圖片)效果，父級的form元素有個東西不能丟，就是：enctype="multipart/form-data" enctype屬性規定在發送到伺服器之前應該如何對錶單數據進行編碼，預設的編碼是：”application/x-www-form-urlencoded“。對於普通數據是挺適用的，但是，對於文件什麼的，就不能亂編碼了，該什麼就是什麼，只能使用multipart/form-data作為enctype屬性值。

html代碼：

              <div class="detail-item">
                            <form action="" enctype="multipart/form-data" id="formData2">
                                <span class="item-tit" style="margin-top: 22px;">頭像</span>
                            <ul class="clearfix list-unstyled pic-list">
                                <li>
                                    <img id="imgName" ms-attr-src="UserData.Files"  style="width: 120px; height: 150px; border-radius: 3px;">
                                </li>
                                <li>
                                    <span class="info"><input id="file" class="filepath" onchange="changepic(this)" type="file" accept="image/*" /></span>
                                    <span class="info"><input type="button" id="uploadbt" ms-click="UploadImage()" style="background-image:url(/ViewV5/JS/jquery.uploadify-v2.1.0/kssc.png); width:75px; height:28px; border:0px; cursor:pointer" /></span>
                                   
                                    <input type="hidden" id="imgPath" ms-duplex="UserData.Files"/>
                                </li>
                            </ul>
                            </form>
                        </div>

2.圖片預覽

就是替換img的src；而讀取URL有filereader 和 URL.createObjectURL 兩種預覽方式。這兩種方式可以獲得上傳圖片的名字（name）

    //圖片預覽 
    function changepic() {
        //var reads = new FileReader();
        //var f = document.getElementById('file').files[0];
        //reads.readAsDataURL(f);
        //reads.οnlοad = function(e) {
        //    document.getElementById('imgName').src = this.result;
        //};
        var newsrc = getObjectURL(document.getElementById('file').files[0]);
        document.getElementById('imgName').src = newsrc;
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        // 下麵函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

3.圖片上傳

前端js：

  UploadImage: function (e) {
            var ofile = $("#file").get(0).files[0];
            var formData = new FormData();
            if (!ofile) { 
                alert('請上傳文件');
                return; 
            }
            var size = ofile.size / 1024 / 1024;
            if (size > 1) {
                alert('文件不能大於1M');
                return;
            }
            formData.append("file", ofile);//這個是文件，這裡只是演示上傳了一個文件，如果要上傳多個的話將[0]去掉
            formData.append("F_ID", $("#F_ID").val());//這個是上傳的其他參數
            $.ajax({
                url: '/ViewV5/Base/UploadTX.ashx',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (msg) {
                    if (msg) {
                        var obj = JSON.parse(msg);
                        if (obj.success) {
                            $("#imgPath").val(obj.sourceUrl);
                        }
                        top.ComFunJS.winsuccess("操作成功");
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        }

後端：上傳到網站根目錄下，並返回相對路徑需要提交表單的時候保存到資料庫。

HttpFileCollection files = HttpContext.Current.Request.Files;
            if (files.Count>0)
            {
                UpSaveImg(context,files[0]);
            }
/// <summary>
        /// 新的上傳方法
        /// </summary>
        /// <param name="file"></param>
        public void UpSaveImg(HttpContext context,HttpPostedFile file)
        {
            try
            {
                if (file.ContentLength > 1000 * 1024)
            {
                context.Response.Write("{\"statusCode\":\"300\", \"message\":\"文件過大，限制1M以內！\"}");
                return;
            }
            Result result = new Result();
            result.success = false;
            result.msg = "Failure!";
            string tx_path = HttpContext.Current.Server.MapPath(UploadFile);//獲取文件上傳路徑
            TXFileHelper.CreateDir(tx_path);
            string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8);
            file.SaveAs(tx_path + fileName + ".jpg");
            result.success = true;
            result.msg = "sucess";
            result.sourceUrl = tx_path + fileName + ".jpg";
            result.sourceUrl = @"\images" + Regex.Split(result.sourceUrl, "images", RegexOptions.IgnoreCase)[1] ;//圖片的相對路徑
            //返回圖片的保存結果（返回內容為json字元串，可自行構造，該處使用Newtonsoft.Json構造）
            context.Response.Write(JsonConvert.SerializeObject(result));
            }
            catch (Exception ex)
            {
            context.Response.Write(ex.Message.ToString() + ex.StackTrace);
        }