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 相关文章推荐
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现日历效果
Sep 11 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
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
车辆转让协议书
2014/09/24 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS