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

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

jQuery Ajax方式上传文件用到两个对象

 function ajaxSubmitForm() { 


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阻止表单再次提交 

第一个对象:FormData

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

第二个对象:XMLHttpRequest

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

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹....

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

有了这两个对象,我们可以真正的实现Ajax方式上传文件。

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

示例代码:

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

<!DOCTYPE html>
<html>
<head>
 <title>Html5 Ajax 上传文件</title>
 <script type="text/javascript">
  function UpladFile() {
   var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象
   var FileController = "../file/save";     // 接收上传文件的后台地址 
   // FormData 对象
   var form = new FormData();
   form.append("author", "hooyes");      // 可以增加表单数据
   form.append("file", fileObj);       // 文件对象
   // XMLHttpRequest 对象
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function () {
    alert("上传完成!");
   };
   xhr.send(form);
  }
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>

您可能感兴趣的文章:

很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象,HTML5还支持使用多种更灵活的方式,如拖拽文件到指定的元素上产生。

Ajax已成功上传文件,但这时我们会想到一个问题,如何显示进度条?带着这个问题,脑子会想到,Flash? 浏览器插件?。

NO,现在不需要这些东西了。

开始着手,先做一个进度条,进度条也很简单,使用HTML5 新加的标签:

<progress id="progressBar" value="0" max="100"> </progress>

这个在浏览器中便会呈现了一个进度条,现在我们要做的就是在上传的时候,实时的去改变它的Value值,然后进度显示的问题便交给它了。

我们的服务器端无需修改,只需要在JS中XHR对象加一个事件。

本文由美洲杯赌球发布于计算机教程,转载请注明出处:jQuery.Form实现Ajax上传文件同时设置headers的方法

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。