使用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. IOS微信点击input弹出输入法,关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

  2. [Swift]LeetCode414. 第三大的数 | Third Maximum Number

    Given a non-empty array of integers, return the third maximum number in this array. If it does not e ...

  3. [Swift]LeetCode845. 数组中的最长山脉 | Longest Mountain in Array

    Let's call any (contiguous) subarray B (of A) a mountain if the following properties hold: B.length ...

  4. linux入门--Linux和UNIX的关系及区别

    UNIX 与 Linux 之间的关系是一个很有意思的话题.在目前主流的服务器端操作系统中,UNIX 诞生于 20 世纪 60 年代末,Windows 诞生于 20 世纪 80 年代中期,Linux 诞 ...

  5. React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题

    首先 导航链接应该使用  NavLink 而不再是  Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...

  6. Linux查找文件内容

    从当前目录递归查找文件名为 .py 中包含 conf 的文件名: find -name "*.py" | xargs grep "conf"

  7. 【从零开始自制CPU之学习篇04】电容

    电解电容: 多数在1μF以上,直接用数字表示.如:4.7μF.100μF.220μF等等.这种电容的两极有正负之分,长脚是正极. 独石电容: 独石电容器是多层陶瓷电容器的别称, 简称MLCC 读数方法 ...

  8. asp.net core 系列 16 Web主机 IWebHostBuilder

    一.概述 在asp.net core中,Host主机负责应用程序启动和生存期管理.host主机包括Web 主机(IWebHostBuilder)和通用主机(IHostBuilder).Web 主机是适 ...

  9. 将Maple输出的LaTex导出到txt文件

    将Maple输出的LaTex导出到txt文件 1. 生成LATEX Maple可以把它的表达式转换成LATEX, 使用latex命令即可: > latex(x^2+y^2=z^2); {x}^{ ...

  10. Java基础19:Java集合框架梳理

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...