使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html
 
 
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件。
 
不是用<form>表单构造FormData对象,var file = fileInput.files[0];它的file值为以下的图片的对象
 


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" 文件的二进制属性
上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢?
本文将介绍通过jQuery使用FormData对象上传文件。
 
使用<form>表单初始化FormData对象方式上传文件
<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。
上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。
 
使用FormData对象添加字段方式上传文件,它 不是用<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’。
 
从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,
只需要在<input type="file" multiple>里添加multiple或multiple="multiple"属性。
 
通过AJAX提交表单和上传文件可以不使用FormData对象
 

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)" >&times;</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 对象上传二进制文件的更多相关文章

  1. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  2. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  3. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  4. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  5. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  6. 利用formdata对象上传文件时,需要添加的参数

    function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...

  7. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  8. axios+FormData文件上传

    axios+FormData文件上传 原理:FormData上传 创建一个FormData对象,将得到的文件流对象放在FormData内,然后使用axios上传 注意: 1.请求头设置 headers ...

  9. C# HTTP系列13 以form-data方式上传多个文件以及键值对集合到远程服务器

    系列目录     [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" run ...

随机推荐

  1. [Swift]LeetCode83. 删除排序链表中的重复元素 | Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...

  2. [Swift]LeetCode174. 地下城游戏 | Dungeon Game

    The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dungeon. ...

  3. ThinkInJava之内部类

    一:内部类概述 将一个类的定义放在另一个类的内部,这就是内部类.内部类是Java一种非常有用的特征,因为他允许你把一些逻辑相关的数据组织在一起,并控制它的可见性. 二:内部类的创建 我们都知道类的创建 ...

  4. mongo 删除 表中字段

    查询语句 db.getCollection("A表").update( { } ,{   $unset:{"a":1}  } , {multi: true} ) ...

  5. Python内置函数(5)——bin

    英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. ...

  6. GitHub 1W star 成就达成!

    起因 感谢各位大佬的支持收获了人生第一个(很有可能也是唯一一个)1W star 项目. 从今年一月份创建项目至今 8 个月时间. 一共关闭了 27 个 issue,47 个 RP,总共有 11 位小伙 ...

  7. 【Docker】(2)---仓库、镜像、容器

    [Docker](2)---仓库.镜像.容器     学习Docker,我觉得首先要了解的是仓库.镜像.容器到底是什么,他们有什么区别. 一.通俗理解 1.Docker 镜像 (images) 容器运 ...

  8. redis 系列23 哨兵Sentinel (上)

    一.概述 Sentinel(哨岗或哨兵)是Redis的高可用解决方案:由一个或多个Sentinel实例(instance)组成的Sentinel系统(system)可以监视任意多个主服务器,以及这些主 ...

  9. Android客户端与服务器交互方式-小结

    最近的Android项目开发过程中一个问题困扰自己很长时间,Android客户端与服务器交互有几种方式,最常见的就是webservices和json.要在Android手机客户端与pc服务器交互,需要 ...

  10. 从零开始学习PYTHON3讲义(一)认识Python

    课程名称 从零开始PYTHON3 课程长度 15讲 适用年龄 15-20岁(初三-大一) 本讲名称 认识Python 时长 90分钟 教学内容分析 Python是时下最流行的计算机编程语言之一.本课程 ...