jquery Form轻松实现文件上传


Posted in jQuery onMay 24, 2017

很久开始前就用这个插件了,每次都忘记具体的调用方法,特地写个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 相关文章推荐
关于jQuery库冲突的完美解决办法
May 20 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
You might like
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js自定义事件代码说明
2011/01/31 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
js实现简单的验证码
2015/12/25 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python下载微信公众号相关文章
2019/02/26 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python中property和setter装饰器用法
2019/12/19 Python
5款实用的python 工具推荐
2020/10/13 Python
python 实现客户端与服务端的通信
2020/12/23 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
小学班级口号
2014/06/09 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书