jquery Form implementiert problemlos die gemeinsame Nutzung von Datei-Upload-Instanzen

In diesem Artikel wird hauptsächlich der relevante Prozess von jquery Form zur einfachen Implementierung des Datei-Uploads vorgestellt. Er hat einen gewissen Referenzwert und hofft, Dadong zu helfen.

Ich verwende dieses Plug-in schon seit langer Zeit. Jedes Mal, wenn ich die spezifische Aufrufmethode vergesse, schreibe ich speziell eine Demo, um sie aufzuzeichnen.
Gehen Sie zuerst zum Portal dieser Demo, nicht wahr! Dann fing es an...

①First 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>

Verstecken Sie den echten Datei-Upload-Button (weil er zu hässlich ist). ), definieren Sie selbst eine „.j_uploadFile“-Triggerschaltfläche und verknüpfen Sie sie dann mit der Dateischaltfläche im Formular.

②Wir stellen vor: jqueryForm

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

③Hier ist der Punkt

<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>

Klicken Sie auf die Schaltfläche „Fake-Upload“ und denken Sie daran, gleichzeitig die Schaltfläche „Echte Datei“ auszulösen, wenn sich der Wert der Schaltfläche „Upload“ ändert (d. h. wenn Sie den Ordner öffnen, eine neue Datei auswählen und auf „OK“ klicken). Vergessen Sie nicht, den Dateiwert im gesamten Formular zu löschen, wenn die Anforderung erfolgreich ist oder fehlschlägt. Andernfalls ändert sich der Wert nicht, wenn Sie dieselbe Datei zum zweiten Mal auswählen es wird nicht hochgeladen.

Verwandte Empfehlungen:

Struts1 & JQuery-Formulardatei-Asynchron-Upload-Beispielfreigabe

Das Optionsfeld für die JQuery-Formularüberprüfung ist ausgewählt. Erfahrung Zusammenfassung

Detaillierte Erläuterung des Hochladens von Dateien mit jQuery Ajax und anderer Datenbeispiele mit FormData

Das obige ist der detaillierte Inhalt vonjquery Form implementiert problemlos die gemeinsame Nutzung von Datei-Upload-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!