jquery Form轻松实现文件上传
更新时间:2017年05月24日 15:39:55 作者:p493794782
这篇文章主要介绍了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> //点击上传图片 $('.j_upLoadFile').click(function(){ $('.j_file').click(); }); //选择了新文件 $('.j_file').change(function(){ //如果文件为空 if($(this).val() == ''){ return; } $('#submitForm').ajaxSubmit({ type:'post', dataType:'json', success:function(result){ //请求成功后的操作 //并且清空原文件,不然选择相同文件不能再次传 $('.j_file').val(''); }, error:function(){ //并且清空原文件,不然选择相同文件不能再次传 $('.j_file').val(''); } }); }) </script>
点击假的上传按钮记得同时触发真正的file按钮,当上传按钮的value改变值(即打开文件夹你选择新的文件,点确定时),会触发ajaxSubmit函数,上传整个form表单,别忘了在请求成功或失败,都要清空file值,不然第二次选择相同的文件,等于value没变,不给上传的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 使用jquery.form.js实现图片上传的方法
- jquery.form.js框架实现文件上传功能案例解析(springmvc)
- 使用jQuery.form.js/springmvc框架实现文件上传功能
- jQuery用FormData实现文件上传的方法
- jQuery Ajax使用FormData对象上传文件的方法
- jQuery.form插件的使用及跨域异步上传文件
- Struts2+jquery.form.js实现图片与文件上传的方法
- jQuery+formdata实现上传进度特效遇到的问题
- 基于jQuery通过jQuery.form.js插件实现异步上传
- asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
相关文章
jQuery在ie6下无法设置select选中的解决方法详解
这篇文章主要介绍了jQuery在ie6下无法设置select选中的解决方法,结合实例分析了jQuery在ie6下无法设置select选中的原因与相关处理技巧,需要的朋友可以参考下2016-09-09
最新评论