FormData 对象上传二进制文件
XMLHttpRequest
发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件。{
lastModified:1247549551674
lastModifiedDate:Tue Jul 14 2009 13:32:31 GMT+0800 (中国标准时间) {}
name:"ju.jpg"
size:879394
type:"image/jpeg"
webkitRelativePath:""
}
可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样:
var formData = new FormData(); formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456" // HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]); // JavaScript file-like 对象var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
通过表单创建 FormData 对象
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form> enctype="multipart/form-data" 文件的二进制属性
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form> $.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
- processData设置为false。因为data值是FormData对象,不需要对数据做处理。
- <form>标签添加enctype="multipart/form-data"属性。
- cache设置为false,上传文件不需要缓存。
- contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
<form>
表单构造FormData
对象,常用<div id="uploadForm">
<input id="file" type="file" multiple/>
<button id="upload" type="button">upload</button>
</div> var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
//
}).fail(function(res) {
//
});
- append()的第二个参数应是文件对象,即$('#file')[0].files[0]。
- contentType也要设置为‘false’。
Form Data 图片上传,手机版,使用 mui 的方法,效果图为:
<style>
.anviz-upload-file .image-item{
width: 30px;
height: 30px;
background-image: url(../../img/icon/add.png);
background-size: 100% 100%;
display: inline-block;
position: relative;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #e8e8e8;
margin-left: 20px;
}
.anviz-upload-file .image-item .image-close
{
position: absolute;
display: inline-block;
right: -6px;
top: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 12px;
background-color: #FF5053;
color: #f3f3f3;
border: solid 1px #FF5053;
font-size: 9px;
font-weight:;
z-index:;
}
.anviz-upload-file .image-item input[type="file"]{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity:;
cursor: pointer;
z-index:;
}
.img-list{
width: 100%;
height: 105px;
padding: 10px 10px;
overflow: hidden;
border-top: 1px solid #c8c7cc;
border-bottom: 1px solid #c8c7cc;
background: #fff;
margin:;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
overflow: scroll; }
.img-list li{
position: relative;
margin-right: 15px;
}
.img-list li img{
width: 85px;
height: 85px;
}
.img-list li span{
position: absolute;
top: -5px;
left: 73px;
background: #00a0e8;
width: 20px;
height: 20px;
border-radius: 20px;
text-align: center;
line-height: 18px;
color: #fff;
}
</style> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6 anviz-upload-warp" style="display: flex;padding: 0;">
<h5 class="anviz-padded">Attachments</h5>
<div class="anviz-upload-file">
<div class="image-item">
<input id="file" type="file" />
</div>
</div>
</li>
</ul>
<ul id="imgList" class="img-list"></ul>
<script>
mui.ready(function(){
var myfile = document.getElementById('file');
var List = document.getElementsByClassName('img-list')[0]; myfile.onchange = function(){
var files = this.files;
if(!files)return; for(var i = 0;i<files.length;i++){
var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'"><span class="close" onclick="closeli(this)" >×</span></li>';
List.innerHTML+=oLi;
}
}
}); function closeli(obj){
var filearr = [];
var closes = document.getElementsByClassName('close');
[].slice.call(closes).forEach(function(dom,index){
if(obj === closes[index]){
filearr.splice(index,1);
};
});
obj.parentNode.remove();
}
</script>
亲测可用!欢迎指正交流。
FormData 对象上传二进制文件的更多相关文章
- 通过jQuery Ajax使用FormData对象上传文件 (转载)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- IT轮子系列(四)——使用Jquery+formdata对象 上传 文件
前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- jquery 通过ajax FormData 对象上传附件
之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div> 流程图: <input id=& ...
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- axios+FormData文件上传
axios+FormData文件上传 原理:FormData上传 创建一个FormData对象,将得到的文件流对象放在FormData内,然后使用axios上传 注意: 1.请求头设置 headers ...
- C# HTTP系列13 以form-data方式上传多个文件以及键值对集合到远程服务器
系列目录 [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" run ...
随机推荐
- [Swift]LeetCode83. 删除排序链表中的重复元素 | Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...
- [Swift]LeetCode174. 地下城游戏 | Dungeon Game
The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dungeon. ...
- ThinkInJava之内部类
一:内部类概述 将一个类的定义放在另一个类的内部,这就是内部类.内部类是Java一种非常有用的特征,因为他允许你把一些逻辑相关的数据组织在一起,并控制它的可见性. 二:内部类的创建 我们都知道类的创建 ...
- mongo 删除 表中字段
查询语句 db.getCollection("A表").update( { } ,{ $unset:{"a":1} } , {multi: true} ) ...
- Python内置函数(5)——bin
英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. ...
- GitHub 1W star 成就达成!
起因 感谢各位大佬的支持收获了人生第一个(很有可能也是唯一一个)1W star 项目. 从今年一月份创建项目至今 8 个月时间. 一共关闭了 27 个 issue,47 个 RP,总共有 11 位小伙 ...
- 【Docker】(2)---仓库、镜像、容器
[Docker](2)---仓库.镜像.容器 学习Docker,我觉得首先要了解的是仓库.镜像.容器到底是什么,他们有什么区别. 一.通俗理解 1.Docker 镜像 (images) 容器运 ...
- redis 系列23 哨兵Sentinel (上)
一.概述 Sentinel(哨岗或哨兵)是Redis的高可用解决方案:由一个或多个Sentinel实例(instance)组成的Sentinel系统(system)可以监视任意多个主服务器,以及这些主 ...
- Android客户端与服务器交互方式-小结
最近的Android项目开发过程中一个问题困扰自己很长时间,Android客户端与服务器交互有几种方式,最常见的就是webservices和json.要在Android手机客户端与pc服务器交互,需要 ...
- 从零开始学习PYTHON3讲义(一)认识Python
课程名称 从零开始PYTHON3 课程长度 15讲 适用年龄 15-20岁(初三-大一) 本讲名称 认识Python 时长 90分钟 教学内容分析 Python是时下最流行的计算机编程语言之一.本课程 ...