ajax file asynchronous implementation of form upload

This time I will bring you the asynchronous implementation of form upload with ajax file. What are the precautions for asynchronous implementation of form upload with ajax file? The following is a practical case, let’s take a look.

User uploads are always indispensable in projects. Here are the main list of form uploads and ajax uploads! Note: context.Request.Files is not suitable for operating large files. The following list is mainly for processing small

file uploads!

Resource download:

1. jQuery official download address:

https://jquery.com/download/

1. Form upload:

html client part:

    选择文件:
       

General handler server side:

public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";
      HttpPostedFile file1 = context.Request.Files["file1"];
      helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用
      context.Response.Write("ok");//提示执行成功
    }

Encapsulation of upload code:

/// <summary>
    /// 上传图片
    /// </summary>
    /// <param>通过form表达提交的文件
    /// <param>文件要保存的虚拟路径
    public static void uploadImg(HttpPostedFile file,string virpath)
    {     
      if (file.ContentLength > 1024 * 1024 * 4)
      {
        throw new Exception("文件不能大于4M");
      }
      string imgtype = Path.GetExtension(file.FileName);
      if(imgtype!=".jpg"&&imgtype!=".jpeg") //图片类型进行限制
      {
        throw new Exception("请上传jpg或JPEG图片");
      }
      using (Image img = Bitmap.FromStream(file.InputStream))
      {
        string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName);
        img.Save(savepath);
      }
    }
    /// <summary>
    /// 上传文件
    /// </summary>
    /// <param>通过form表达提交的文件
    /// <param>文件要保存的虚拟路径
    public static void uploadFile(HttpPostedFile file, string virpath)
    {
      if (file.ContentLength > 1024 * 1024 * 6)
      {
        throw new Exception("文件不能大于6M");
      }
      string imgtype = Path.GetExtension(file.FileName);
      //imgtype对上传的文件进行限制
      if (imgtype != ".zip" && imgtype != ".mp3")
      {
        throw new Exception("只允许上传zip、rar....文件");
      }
      string dirFullPath= HttpContext.Current.Server.MapPath(virpath);
      if (!Directory.Exists(dirFullPath))//如果文件夹不存在，则先创建文件夹
      {
        Directory.CreateDirectory(dirFullPath);
      }
      file.SaveAs(dirFullPath + file.FileName);
    }

2. Ajax file asynchronous Upload:

Note: Since there is a form upload, why do you need ajax upload? Because during the form upload process, the entire page is refreshed! Ajax asynchronous upload can refresh only the local position. Let’s take a brief look at ajax upload!

html client part:

 
<script></script>
 <script>
  $(function () {
   $("#upload").click(function () {
    $("#imgWait").show();
    var formData = new FormData();
    formData.append("myfile", document.getElementById("file1").files[0]); 
    $.ajax({
     url: "upload.ashx",
     type: "POST",
     data: formData,
     /**
     *必须false才会自动加上正确的Content-Type
     */
     contentType: false,
     /**
     * 必须false才会避开jQuery对 formdata 的默认处理
     * XMLHttpRequest会对 formdata 进行正确的处理
     */
     processData: false,
     success: function (data) {
      if (data.status == "true") {
       alert("上传成功！");
      }
      if (data.status == "error") {
       alert(data.msg);
      }
      $("#imgWait").hide();
     },
     error: function () {
      alert("上传失败！");
      $("#imgWait").hide();
     }
    });
   });
  });
 </script>

 
  选择文件:<input><br>
  <input>
  <img  src="/static/imghwm/default1.png" data-src="wait.gif" class="lazy" alt="ajax file asynchronous implementation of form upload" > 

General handler server side:

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/html";
   if (context.Request.Files.Count > 0)
   {
    HttpPostedFile file1 = context.Request.Files["myfile"];
    helper.uploadFile(file1, "~/upload/"); //这里引用的是上面封装的方法
    WriteJson(context.Response, "true", "");
   }
   else
   {
    WriteJson(context.Response, "error", "请选择要上传的文件");
   }
  }

json code encapsulation:

public static void WriteJson(HttpResponse response,
      string status1, string msg1, object data1 = null)
    {
      response.ContentType = "application/json";
      var obj = new { status = status1, msg = msg1, data = data1 };
      string json = new JavaScriptSerializer().Serialize(obj);
      response.Write(json);
    }

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does AjaxFileUpload dynamically add a file upload box

Practical summary of Ajax and jsonp in the project

The above is the detailed content of ajax file asynchronous implementation of form upload. For more information, please follow other related articles on the PHP Chinese website!