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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现滚动效果
Nov 17 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 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
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
js实现抽奖效果
2017/03/27 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python中的ctime()方法使用教程
2015/05/22 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python