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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery实现计算器功能
Oct 19 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
Terran剧情介绍
2020/03/14 星际争霸
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
开展批评与自我批评心得体会
2014/10/17 职场文书
护理见习报告范文
2014/11/03 职场文书
党委工作总结2015
2015/04/27 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
python process模块的使用简介
2021/05/14 Python
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL