Maison > Article > interface Web > fichier ajax, implémentation asynchrone du téléchargement de formulaire

fichier ajax, implémentation asynchrone du téléchargement de formulaire

php中世界最好的语言original: 2018-03-31 10:05:071717parcourir

Cette fois, je vais vous présenter l'implémentation asynchrone du téléchargement de formulaire avec un fichier ajax. Quelles sont les précautions pour l'implémentation asynchrone du téléchargement de formulaire avec un fichier ajax. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Les téléchargements d'utilisateurs sont toujours indispensables dans les projets. Voici la liste principale des téléchargements de formulaires et des téléchargements ajax ! Remarque : context.Request.Files ne convient pas à l'exploitation de fichiers volumineux. La liste suivante gère principalement les petits téléchargements de fichiers !

Téléchargement des ressources :

1. Adresse de téléchargement officielle de jQuery : https://jquery.com/download/

1. 🎜>

Partie client HTML :

<form action="upload.ashx" method="post" enctype="multipart/form-data">
    选择文件:<input type="file" name="file1" /><br />
    <input type="submit" value="上传" />
  </form>

Gestionnaire général côté serveur :

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 du code de téléchargement :

/// <summary>
    /// 上传图片
    /// </summary>
    /// <param name="file">通过form表达提交的文件</param>
    /// <param name="virpath">文件要保存的虚拟路径</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 name="file">通过form表达提交的文件</param>
    /// <param name="virpath">文件要保存的虚拟路径</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. Téléchargement asynchrone de fichiers Ajax :

Remarque : Puisqu'il existe un téléchargement de formulaire, pourquoi avez-vous besoin d'un téléchargement ajax ? Parce que pendant le processus de téléchargement du formulaire, la page entière est actualisée ! Le téléchargement asynchrone Ajax ne peut actualiser que la position locale. Jetons un bref coup d'œil au téléchargement ajax !

Partie client HTML :

<head> 
<script src="jquery-2.1.4.js"></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>
</head>
<body> 
  选择文件:<input type="file" id="file1" /><br />
  <input type="button" id="upload" value="上传" />
  <img src="wait.gif" style="display:none" id="imgWait" /> 
</body>

Gestionnaire général côté serveur :

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", "请选择要上传的文件");
   }
  }

Encapsulation du code json :

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);
    }

Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment AjaxFileUpload ajoute-t-il dynamiquement une boîte de téléchargement de fichiers

Un résumé pratique d'Ajax et de jsonp dans le projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Javascript implémente l'effet plafond (exemple de code)Article suivant：Javascript implémente l'effet plafond (exemple de code)

Articles Liés

Voir plus