Ajax简单实现文件异步上传的多种方法
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简单实现文件异步上传的多种方法的更多相关文章
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- 文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 简单的文件ftp上传
目录 简单的文件ftp上传 简单的文件ftp上传 server import socket import struct service=socket.socket() service.bind(('1 ...
- 小程序使用 Promise.all 完成文件异步上传
小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...
随机推荐
- swift 定义类方法(type methed)
swift 中声明结构体或者枚举的类型方法,需要在func前加上关键字 ststic ,但是如果要定义一个类的类方法时,需要用关键字 class class SomeClass { class ...
- Android HTTPS如何10分钟实现自签名SSL证书
前言 去年公司内一个应用加了支付宝支付功能,为了保证安全,支付请求链接写成了https. 由于公司服务器使用的是的自签名证书,而在Android系统中自己签署的不能通过验证的,所以会抛出错误. 于是我 ...
- Android_gridVIew
xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- UILabel 自动换行 和支持换行符
这个主要是 lable对\n换行符号的支持,有的时候我们从网页或者后台拿到的数据需要处理一下: 这里没什么要说的,注意两点,一个是label的numofline属性的值要为0 或者不能为1 这样la ...
- 自定义ListView适配器Adapter引用布局文件的情况下实现点击列表项时背景颜色为灰色
listview控件设置适配器的时候,如果使用自定义的adapter,比如MyArrayAdapter extends ArrayAdapter<String> 如果listitem布局文 ...
- bootstrap兼容IE
这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用 ...
- QL Server 中四种匹配符的含义
SQL中我们会见到很多的匹配符,下面解释一下 % 代表零个或者多个任意字符 _ 代表一个任意字符 [] 指定范围内的任意单个字符 [^] 不在指定范围内的任意单个字符 带有匹配符的字符串必须使用引号引 ...
- java反射案例讲解
本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...
- sql server中分布式查询随笔
由于业务逻辑的多样性 经常得在sql server中查询不同数据库中数据 这就产生了分布式查询的需求 现我将开发中遇到的几种查询总结如下: 1.access版本 --建立连接服务器 exec sp_a ...
- Appium 提高脚本复用、可配置性