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 昵称：同心同德）