jquery Form easily implements file upload instance sharing

This article mainly introduces the related process of jquery Form to easily implement file upload, which has certain reference value. Interested friends can refer to it, hoping to help Dadong.

I have been using this plug-in a long time ago. Every time I forget the specific calling method, I specially write a demo to record it.
Go to the portal of this demo first, eh! Then it started...

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

Hide the real file upload button (because it is too ugly ), define a ".j_uploadFile" trigger button yourself, and then it will be associated with the file button in the form.

②Introduce jqueryForm

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

③Here comes the key 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>

Click the fake upload button and remember to trigger the real file button at the same time. When the value of the upload button changes (that is, when you open the folder and select a new file and click OK), the ajaxSubmit function will be triggered to upload the entire form. Don't forget to clear the file value when the request succeeds or fails. Otherwise, if you select the same file for the second time, the value will not change and it will not be uploaded.

Related recommendations:

struts1 & jquery form file asynchronous upload example sharing

JQuery form verifies whether the radio button is selected Experience summary

jQuery Ajax uses FormData to upload files and other data examples

The above is the detailed content of jquery Form easily implements file upload instance sharing. For more information, please follow other related articles on the PHP Chinese website!