1. 认识FormData对象

FormData是Html5新加进来的一个类,可以模拟表单数据

构造函数

FormData (optional HTMLFormElement form) (可选)

解释

一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

void append(DOMString name, DOMString value)

  • name 表单元素名称
  • value 表单元素要传递的值
 <form name="myForm"  enctype="multipart/form-data">
<input type="text" name="userName">
<input type="file" name="img">
<input type="button" id="btn" value="submit">
</form>

2. 使用javascript简单实现

 function upload() {
var userName = document.myForm.userName.value;
var img = document.myForm.img.files[0];
var fm = new FormData();
fm.append('userName', userName);
fm.append('img', img); var request = new XMLHttpRequest();
request.open('POST', 'submitform.php');
request.send(fm);
}

3. 使用Ajax实现

 $('#btn').click(function () {
var userName = document.myForm.userName.value;
var img = document.myForm.img.files[0]; var fm = new FormData();
fm.append('userName', userName);
fm.append('img', img);
$.ajax(
{
url: 'submitform.php',
type: 'POST',
data: fm,
contentType: false, //禁止设置请求类型
processData: false, //禁止jquery对DAta数据的处理,默认会处理
//禁止的原因是,FormData已经帮我们做了处理
success: function (result) {
//测试是否成功
//但需要你后端有返回值
alert(result);
}
}
);
});

4. ajaxfileupload.js插件实现Ajax文件上传

 function upload(){
$.ajaxFileUpload({
url: 'a.php', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'file', //文件上传空间的id属性
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data);
addI(data);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
);
}

对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值

来自:http://www.jianshu.com/p/d90d2e6bb0d5

Ajax简单实现文件异步上传的多种方法的更多相关文章

  1. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  2. 文件的上传(表单上传和ajax文件异步上传)

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  3. 普通文件的上传(表单上传和ajax文件异步上传)

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  4. 文件的上传(1)(表单上传和ajax文件异步上传)

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  5. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  6. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  7. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  8. 简单的文件ftp上传

    目录 简单的文件ftp上传 简单的文件ftp上传 server import socket import struct service=socket.socket() service.bind(('1 ...

  9. 小程序使用 Promise.all 完成文件异步上传

    小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...

随机推荐

  1. swift 定义类方法(type methed)

    swift   中声明结构体或者枚举的类型方法,需要在func前加上关键字 ststic  ,但是如果要定义一个类的类方法时,需要用关键字 class class SomeClass { class ...

  2. Android HTTPS如何10分钟实现自签名SSL证书

    前言 去年公司内一个应用加了支付宝支付功能,为了保证安全,支付请求链接写成了https. 由于公司服务器使用的是的自签名证书,而在Android系统中自己签署的不能通过验证的,所以会抛出错误. 于是我 ...

  3. Android_gridVIew

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  4. UILabel 自动换行 和支持换行符

    这个主要是 lable对\n换行符号的支持,有的时候我们从网页或者后台拿到的数据需要处理一下: 这里没什么要说的,注意两点,一个是label的numofline属性的值要为0 或者不能为1  这样la ...

  5. 自定义ListView适配器Adapter引用布局文件的情况下实现点击列表项时背景颜色为灰色

    listview控件设置适配器的时候,如果使用自定义的adapter,比如MyArrayAdapter extends ArrayAdapter<String> 如果listitem布局文 ...

  6. bootstrap兼容IE

    这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用 ...

  7. QL Server 中四种匹配符的含义

    SQL中我们会见到很多的匹配符,下面解释一下 % 代表零个或者多个任意字符 _ 代表一个任意字符 [] 指定范围内的任意单个字符 [^] 不在指定范围内的任意单个字符 带有匹配符的字符串必须使用引号引 ...

  8. java反射案例讲解

    本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...

  9. sql server中分布式查询随笔

    由于业务逻辑的多样性 经常得在sql server中查询不同数据库中数据 这就产生了分布式查询的需求 现我将开发中遇到的几种查询总结如下: 1.access版本 --建立连接服务器 exec sp_a ...

  10. Appium 提高脚本复用、可配置性