asp.net mvc Ajax 上傳圖片加預覽

前言：此代碼是在微信公眾號的weui的基礎上在此封裝的。

ajax提交需要先引用 jquery-form.js

js下載地址  鏈接: https://pan.baidu.com/s/13Xi9AxlBbOGLK5lF9mliqw 提取碼: ya7m 復制這段內容后打開百度網盤手機App，操作更方便哦

html部分

<form id="fileForm" action="" method="post" enctype="multipart/form-data">
    <image src="此處是首次加載的預覽圖片路徑" class="image" id="image"></image>
    <input id="uploaderInput" name="file" class="weui-uploader__input" type="file" accept="image/*" />
</form>

js部分

var $uploaderInput = $("#uploaderInput");
$uploaderInput.on("change", function (e) {
   var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
   var isupload = true;
   //預覽
   for (var i = 0, len = files.length; i < len; ++i) {
        var file = files[i];
        var filetype = file.type;
        var size = file.size;
        if (size > 1 * 1024 * 1024) {
            isupload = false;
            alert("請上傳小於1M的圖片");
        }
        else {
           if (url) {
                src = url.createObjectURL(file);
           } else {
                src = e.target.result;
           }
           $("#image").attr("src", src);
           //$uploaderFiles.append($(tmpl.replace('#url#', src)));
        }
    }
    if (isupload) {
       //上傳到服務器
       $("#fileForm").ajaxSubmit({
          url: "@Url.Content("~/控制器名稱/FileUpload")",
          type: "post",
          success: function (data) {
          var filepaths = $("#filepaths").val();
          filepaths = data.paths;
          $("#imageurl").val(filepaths);
              //console.log(filepaths);
          },
          error: function (aa) {
             alert(JSON.stringify(aa));
          }
      });
    }
 });

C#代碼

[HttpPost]
public JsonResult FileUpload()
{
    string paths = "";
    //多張圖片上傳
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase file = Request.Files[i];
        var fileName = Guid.NewGuid().ToString("N") + "_" + file.FileName;
        var filePath = Server.MapPath("~/Content/Certificates/Temp/");
        if (!Directory.Exists(filePath))
        {
           Directory.CreateDirectory(filePath);
        }
        paths += "~/Content/Certificates/Temp/" + fileName + ",";
        file.SaveAs(Path.Combine(filePath, fileName));
    }
    return Json(new { paths },JsonRequestBehavior.AllowGet);
}

注：以上代碼屬個人整理，用於交流學習，非原創。如涉及侵權，請聯系我，我立即處理。（QQ/微信：742010299 昵稱：同心同德）