jQuery.Form实现Ajax上传文件同时设置headers的方法


Posted in jQuery onJune 26, 2017

废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧:

<span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span>
var option = { 
   url : cache.batchImport, 
 
 type : 'POST', 
  
 dataType : 'json', 
  
 headers : {"token" : localStorage.getItem('token')}, //添加请求头部 
 
 success : function(data) { 
   
  console.log('success') 
   
  }, 
  error: function(data) { 
    console.log('error'); 
  } 
 }; 
$("#userForm").ajaxSubmit(option); 
return false; //最好返回false,因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

遇到一个问题,要在上传文件的同时设置headers信息,但form表单提交可以上传文件不能设置headers,ajax可以设置headers不能上传文件,后来从网上找到了jQuery.form可以实现,代码如上。

由于file按钮不能设置样式,要用一个按钮来间接触发file,但这在ie上不能实现,因为ie只可以直接触发按钮实现功能,所以要把file的位置和大小设置为和button一样,但透明度设置为0覆盖在button达到直接触发控件的要求兼容ie。兼容后样式在其他浏览器上又有问题了。

兼容其他浏览器样式代码如下:

var isIE = navigator.userAgent.indexOf('MSIE')>-1; 
if(!isIE){ 
  $('#filePath').css('z-index',-1); 
}

以上所述是小编给大家介绍的jQuery.Form实现Ajax上传文件同时设置headers,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
jQuery实现frame之间互通的方法
Jun 26 #jQuery
jQuery回调方法使用示例
Jun 26 #jQuery
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
jQuery validata插件实现方法
Jun 25 #jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 #jQuery
You might like
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
使用js画图之饼图
2015/01/12 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
喝酒检查书范文
2014/02/23 职场文书
节约用水演讲稿
2014/05/21 职场文书
企业口号大全
2014/06/12 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
python如何查找列表中元素的位置
2022/05/30 Python