通常情况下,我们上传文件都会使用form表单来提交文件。但有时候,我们会有异步提交文件的需求,在这种情况下,我们就需要新建一个Formdata来提交文件,后台如果使用的是PHP的话可以使用$_FILES来获取上传的文件。

var formdata = new FormData();//新建一个Formdata用来存储文件
formdata.append('submitfile', $("#file")[0].files[0]);//获取文件内容,并且用append的方法把文件放入formdata中
$.ajax({
type:"POST",
data:formdata,
url:'',
cache: false,
processData: false,
contentType: false,
success:function(data){
alert(data.msg);
if(data.code == 1){
var timer = setTimeout(function(){
window.location.href = window.location.href;
clearTimeout(timer);
},2000)
}
},
error:function(data){
layer.msg('获取数据失败');
}
})
return false;
})

ajax利用FormData异步文件提交的更多相关文章

  1. 利用Formdata实现form提交文件上传不跳转页面

    作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...

  2. Ajax使用formdata异步上传文件,报错the request was rejected because no multipart boundary was found

    基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定 processData设为false 把processData设为false,让jquery不要对formData做处理, ...

  3. 传统表单提交文件上传,以及FormData异步ajax上传文件

    传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...

  4. JQuery中使用FormData异步提交数据和提交文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

  5. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  6. 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能

    Ajax文件上载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 导入组件并准备静态脚本 <dependency> <groupId& ...

  7. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  8. [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  9. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

随机推荐

  1. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...

  2. Flex中一些属性总结

    Flex中一些属性总结 1.buttonMode = "true"  鼠标变成手形 2.useHandCursor = "true" 鼠标变成手形

  3. JSON对象转换成JSON字符串

    1.问题背景 有一个json对象,需要将其转换成json字符串 JSON.stringify(obj) 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  4. Flex中创建Accordion报错

    1.错误描述 2.错误原因 <mx:Accordion width="100%" height="100%"> <s:NavigatorCon ...

  5. 让微信,qq,uc浏览器使用全屏模式,全屏模式里,浏览器是不会上下左右滑动出现背景的

    <meta name="x5-fullscreen" content="true"> <meta name="full-screen ...

  6. 关于tween.js测试介绍

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>t ...

  7. pat1021-1030

    1021求树的直径网上一搜就有,但是我不太理解 只需要一共求两次的dfs的论调,好吧我收回这句话,好想脑补了下,第一次dfs有多个最长点,只需要搜一个就行QAQ.这么看来我写麻烦了 #include& ...

  8. JavaScript的作用域详解。

    首先讲原理,大家都知道JS是逐行执行,首先进入作用域只有有两种方式:  1.当看到script标签的时候,进入到作用域,也就是内置的<script></script>     ...

  9. Windows XP Mode安装

    安装手顺:1. 检测系统是否支持Windows XP Mode2. 安装Windows Virtual PC3. 安装Windows XP Mode 下载地址:1. Windows XP Modeht ...

  10. Python机器学习中文版

    Python机器学习简介 第一章 让计算机从数据中学习 将数据转化为知识 三类机器学习算法 第二章 训练机器学习分类算法 透过人工神经元一窥早期机器学习历史 使用Python实现感知机算法 基于Iri ...