首页 >web前端 >js教程 >jquery Form轻松实现文件上传实例分享

jquery Form轻松实现文件上传实例分享

小云云
小云云原创
2018-01-10 13:40:041539浏览

本文主要介绍了jquery Form轻松实现文件上传的相关过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助大东家。

很久开始前就用这个插件了,每次都忘记具体的调用方法,特地写个demo记录下。
先上这个demo的传送门,恩!然后开始了...

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

将真正的文件上传按钮隐藏(因为它太丑了),自己定义个“.j_uploadFile”的触发按钮,到时候和form里的文件按钮相关联就好了。

②引入jqueryForm


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

③重点来了


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

点击假的上传按钮记得同时触发真正的file按钮,当上传按钮的value改变值(即打开文件夹你选择新的文件,点确定时),会触发ajaxSubmit函数,上传整个form表单,别忘了在请求成功或失败,都要清空file值,不然第二次选择相同的文件,等于value没变,不给上传的。

相关推荐:

struts1 & jquery form 文件异步上传实例分享

JQuery form验证单选框是否选中经验总结

jQuery Ajax使用FormData上传文件和其他数据实例详解

以上是jquery Form轻松实现文件上传实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn