Form实现Ajax上传文件同不时候设置headers的秘籍,ajax达成异步上传文件或图片功效

废话非常少说了,关于jquery
form完结ajax上传文件的方法,我们参谋一下实例代码吧:

jQuery Ajax方式上传文件用到三个目的

澳门皇家国际,正文为大家享用了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

//html代码

<form enctype="multipart/form-data" id="upForm">
 <input type="file" name="file" ><br><br>
 <input type="button" value="提交">
</form>
<div class="picDis">
 <img src="" alt="澳门皇家国际 1">
</div>




//js代码

(':button').click(function(event) {
  //formdata储存异步上传数据
 var formData = new FormData($('form')[0]);
 formData.append('file',$(':file')[0].files[0]);
 //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
 $.ajax({
  url:'formtest.php',
  type: 'POST',
  data: formData,
  //这两个设置项必填
  contentType: false,
  processData: false,
  success:function(data){
  console.log(data)
  var srcPath = data;
  console.log();
     //注意这里的路径要根据自己的储存文件的路径设置
  $('.picDis img').attr('src', '..'+srcPath);
  }
 })
 });

遇见三个主题材料,要在上传文件的同期设置headers音信,但form表单提交能够上传文件不能够安装headers,ajax能够安装headers不能够上传文件,后来从英特网找到了jQuery.form能够兑现,代码如上。

第二个目的:XMLHttpRequest

php:

是因为file按键不能够设置样式,要用一个按键来直接触发file,但那在ie上不能兑现,因为ie只好够直接接触按键达成效益,所以要把file的职分和分寸设置为和button一样,但光滑度设置为0覆盖在button到达直接接触控件的渴求包容ie。兼容后样式在其它浏览器上又有标题了。

现阶段新版的Firefox 与 Chrome
等支撑HTML5的浏览器完美的协助那八个对象,但IE9尚未帮衬 FormData
对象,还在用IE6 ? 只能仰天长叹….

<?php 

$upFile = $_FILES['file'];

/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
 $curPath = dirname(__FILE__);
 $path = $curPath.'\\'.$dirPath;
 if (is_dir($path) || mkdir($path,0777,true)) {
  return $dirPath;
 }
}

//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
 $dirpath = creaDir('upload');
 $filename = $_FILES['file']['name'];
 $queryPath = './'.$dirpath.'/'.$filename;
 //move_uploaded_file将浏览器缓存file转移到服务器文件夹
 if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
  echo $queryPath;
 }
}

 ?>

合营其他浏览器样式代码如下:

有了这八个指标,大家能够真正的达成Ajax方式上传文件。

点击上传图片并发送后, 能够见见页面上显得出图片,
查看当和姑件夹可以见到文件也已囤积到劳动器.

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

亲自过问代码:

在客户端实现异步上传的关键在于FormData,关于这一部分这里有详实介绍:
FormData()

以上所述是我给大家介绍的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>

以上正是本文的全体内容,希望对大家的求学抱有帮助,也冀望大家多多扶助脚本之家。

您或然感兴趣的稿子:

  • jQuery
    Ajax使用FormData上传文件和别的数据后端web.py获取
  • jQuery
    Ajax使用FormData对象上传文件的措施
  • Asp.net
    MVC中应用JQuery插件ajaxFileUpload上传文件
  • jQuery Ajax
    上传文件管理情势介绍(推荐)
  • jQuery插件ajaxfileupload.js实现上传文件
  • 依据jQuery
    Ajax实现上传文件
  • PHP结合jQuery插件ajaxFileUpload完成异步上传文件实例
  • jQuery异步上传文件插件ajaxFileUpload详细介绍
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • jQuery插件ajaxFileUpload落成异步上传文件效果
  • 八个简易的jQuery插件ajaxfileupload.js达成ajax上传文件例子

很简短的代码,便足以高达Ajax情势上传文件,上边的代码中应用<input
type=”file”
/>这种价值观的选项文件的法子产生文书对象,HTML5还支持接纳七种越来越灵活的点子,如拖拽文件到钦赐的要素上爆发。

你可能感兴趣的篇章:

  • jquery的ajaxSubmit()异步上传图片并保留表单数据演示代码
  • jQuery插件ajaxFileUpload异步上传文件
  • jquery之ajaxfileupload异步上传插件(附工程代码)
  • ajax图片上传,图片异步上传,更新实例
  • jQuery插件ajaxFileUpload完成异步上传文件效果
  • asp.net+ajaxfileupload.js
    实现文件异步上传代码分享
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • 分析ajaxFileUpload
    异步上传文件轻巧利用
  • Ajax异步上传文件实例代码分享
  • ASP.NET中MVC使用AJAX调用JsonResult方法并赶回自定义错误音讯
  • ajax实现文件异步上传并回显文件有关消息意义示例

Ajax已成功上传文件,但此刻我们会想到一个主题材料,怎么着展现进程条?带着这一个主题材料,脑子会想到,Flash?
浏览器插件?。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图