jquery Form implémente facilement le partage d'instances de téléchargement de fichiers

Cet article présente principalement le processus pertinent du formulaire jquery pour implémenter facilement le téléchargement de fichiers. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer, dans l'espoir d'aider Dadong.

J'utilise ce plug-in depuis longtemps. Chaque fois que j'oublie la méthode d'appel spécifique, j'écris spécialement une démo pour l'enregistrer.
Allez d'abord sur le portail de cette démo, d'accord ! Puis ça a commencé...

①Premier html

<a href="javascript:void(0)" class="j_upLoadFile">上传图片</a> 
<form action="接口名字" method="post" enctype="multipart/form-data" id="submitForm"> 
  <!-- 随文件一起上传的字段 --> 
  <input type="hidden" name="type" value="temp"> 
  <input type="file" name="pic_name" style="display: none" class="j_file"> 
</form>

Masquer le vrai bouton de téléchargement de fichier (car il est trop moche ), définissez vous-même un bouton déclencheur ".j_uploadFile", puis associez-le au bouton fichier dans le formulaire.

②Présentation de jqueryForm

<script src="libs/jquery.min.js"></script> 
<script src="libs/jquery.form.min.js"></script>

③Voici le point

<script> 
   //点击上传图片 
   $(&#39;.j_upLoadFile&#39;).click(function(){ 
     $(&#39;.j_file&#39;).click(); 
   }); 
 
   //选择了新文件 
   $(&#39;.j_file&#39;).change(function(){ 
     //如果文件为空 
     if($(this).val() == &#39;&#39;){ 
       return; 
     } 
     $(&#39;#submitForm&#39;).ajaxSubmit({ 
       type:&#39;post&#39;, 
       dataType:&#39;json&#39;, 
       success:function(result){ 
         //请求成功后的操作 
 
         //并且清空原文件，不然选择相同文件不能再次传 
         $(&#39;.j_file&#39;).val(&#39;&#39;); 
       }, 
       error:function(){ 
         //并且清空原文件，不然选择相同文件不能再次传 
         $(&#39;.j_file&#39;).val(&#39;&#39;); 
       } 
     }); 
   }) 
 </script>

Cliquez sur le faux bouton de téléchargement et n'oubliez pas de déclencher le vrai bouton de fichier en même temps lorsque la valeur du bouton de téléchargement change (c'est-à-dire lorsque vous ouvrez le dossier, sélectionnez un nouveau fichier et cliquez sur OK). , la fonction ajaxSubmit sera déclenchée pour le téléchargement. Dans tout le formulaire, n'oubliez pas d'effacer la valeur du fichier lorsque la requête réussit ou échoue. Sinon, si vous sélectionnez le même fichier pour la deuxième fois, la valeur ne changera pas et. il ne sera pas téléchargé.

Recommandations associées :

struts1 et partage d'exemples de téléchargement asynchrone de fichiers de formulaire jquery

Le bouton radio de vérification du formulaire JQuery est sélectionné Expérience résumé

Explication détaillée du téléchargement de fichiers jQuery Ajax et d'autres exemples de données à l'aide de FormData

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!