之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看……跑偏了(⊙o⊙)…,我的意思就是用框架实现比较简单,但是如果用jQuery的话,对原理可能会更了解一些,有需要的一起看下吧~

1. multipart/form-data

因为HTTP提供的是基于文本的通信协议,而上传文件传输的是二进制数据,所以需要使用multipart/form-data编码格式,其HTTP消息体格式如下:

------WebKitFormBoundaryb0GZcypmEqOvNHIY
Content-Deiposition: form-data; name="file"; filename="icon.png"
Content-Type: image/png ------WebKitFormBoundaryb0GZcypmEqOvNHIY

multipart/form-data的请求头包含一个特殊的头信息Content-Type,其值为multipart/form-data,另外需要规定一个内容分割boundary用于分割请求体中多个不同的内容:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryb0GZcypmEqOvNHIY

2. input选择并获取文件
<form>
<input type="file" id="uplfile" name="uplfile"/>
<button type="button" id="uplfileBtn">上传</button>
</form>

type="file"的input有一个叫files的DOM属性,可以获取到所选的文件列表(Array),数组中每一个对象都是file类型,

var files = $("#uplfile").prop('files');
3. jQuery上传文件

新版本的XMLHttpRequest对象可以使用FormData对象管理表单数据,可以帮我们进行二进制文件的multipart/form-data编码,如下:

$("#uplfileBtn").click(function(){
var files = $("#uplfile").prop('files'); var data = new FormData();
data.append('file', files[0]); //参数名:file $.ajax({
url: URL,
type: 'POST',
data: data,
cache: false, //禁止浏览器对该URL的缓存
contentType: false,
processData: false,
success: function(){
//后续操作
}
});
});

contentType:jQuery中contentType默认为application/x-www-form-urlencoded,因此传入的data会被转为默认的HTTP编码,这里我们不需要这种转换,设置为false。

processData:jQuery会将传入的data对象转为字符串来发送HTTP请求,这里我们的data已经是FormData对象处理好的multipart/form-data编码,所以不需要转换,设置为false。

4. js中如何直接下载文件

通常在web前端需要下载服务端文件,都是通过指定<a>标签的href属性访问服务端URL来下载保存文件的,也可以在js中:

document.location.href = Url + '?fileName=' + value;

上面这种方法用的是HTTP的GET请求,只能通过URL传参,在相对复杂的场景中(需要传多个参数在服务端动态下载指定文件),即参数比较多的时候,我们想要能够通过ajaxPOST方式来传递参数。

但是用ajax请求的数据只能存放在JavaScript的内存中,可以通过js读取,无法保存到硬盘,因为JavaScript本身无法直接和硬盘交互。那么有什么方法可以实现呢?一向方法总比困难多,我们可以通过模拟Form表单的提交来实现POST请求下载文件,如下:

<form id="myform" action="http://blog.kwin.wang/test/xxx.do" method="post">
<input type="hidden" name="type" value="trade"/>
<input type="hidden" name="time" value="20180818"/>
<input type="hidden" name="fileName" value="a.png"/>
</form>

主动提交Form表单:

$("#myform")[0].submit();

以上就是本文全部内容了,欢迎有兴趣的朋友评论区留言交流~

jQuery用FormData对象实现文件上传以及如何通过ajax下载文件的更多相关文章

  1. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  2. servlet实现文件上传,预览,下载和删除

      一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

  3. 使用java的MultipartFile实现layui官网文件上传实现全部示例,java文件上传

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...

  4. [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  5. 两种文件上传的实现-Ajax和form+iframe

    前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...

  6. PHP多文件上传(二维数组$_FILES('文件域的名称'),move_uploaded_file(‘临时文件名’,‘新的文件名’))

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Struts2实现文件上传和下载,多文件上传,限制文件大小,限制文件类型

    文件上传使用的包:commons-upload-xx.jar                                 commons-io-xx.jar 一.实现文件上传: 1.在表单空间中添 ...

  8. FTP文件上传 支持断点续传 并 打印下载进度(二) —— 单线程实现

    这个就看代码,哈哈哈哈哈  需要用到的jar包是: <dependency> <groupId>commons-net</groupId> <artifact ...

  9. AspNetCore 文件上传(模型绑定、Ajax) 两种方式 get到了吗?

    就目前来说,ASP.NET Core2.1了,已经相当成熟了,希望下个项目争取使用吧!! 上传文件的三种方式("我会的,说不定还有其他方式") 模型绑定 Ajax WebUploa ...

随机推荐

  1. HDU-5492 Find a path (枚举+DP)

    Problem Description Frog fell into a maze. This maze is a rectangle containing N rows and M columns. ...

  2. 利用Sonar定制自定义JS扫描规则(三)——SSLR JavaScript Toolkit 使用说明

    在上一篇blog中讲了在sonar中如何新增自定义的JS规则,这里面比较难的地方是XPath语句的编写,而要编写正确的XPath语句,首先要拿到语法的AST,下面我们就来介绍如何使用SSLR Java ...

  3. 根据马甲、应用商店、统计每天的注册量,要求可以根据选择马甲和app,马甲和appstrore和user_login不同表问题

    这个马甲属于一个表,appStore另一张表,用户登录表,主要操作的就是这三个表. 我这里的马甲和app的id都与用户登录表中的channel对应,在channel存放的是majiaId + “|” ...

  4. 苹果iPhone 5C和5S发布后,消费者如何选择?

    9月11日凌晨苹果新品发布会,笔者的朋友圈居然没有看直播的,真果粉太少了.笔者来阐述一些容易忽略的东西. iPhone5C和5S与5有什么不一样? 新品iPhone 5S 外观与iPhone5 相似度 ...

  5. Visio2010建立ER图并直接导出为SQL语句

    Visio2010建立ER图并直接导出为SQL语句 2013年08月20日 ⁄ 综合 ⁄ 共 2581字 ⁄ 字号 小 中 大 ⁄ 评论关闭 建立数据库时我们需要考虑数据之间的关系,为了理清数据之间的 ...

  6. fiddler手机端抓包配置

    首先,你得安装fiddler,这是前提条件,手机抓包有必须条件: 需要保持电脑和手机在同一个局域网中 (这一点,我一般会在电脑上启动一个wifi,然后手机连接即可) 下面说一下如何配置: 手机连接电脑 ...

  7. 如何在未越狱的ios系统安装ipa文件

    首先我们先下载一个PP助手正版在电脑上 用iphone打开http://z.25pp.com/?from=bdpz,根据网页上的教程,我们安装好PP助手正版(注意是正版!!) 将手机连接电脑,在电脑上 ...

  8. python安装openSSL

    首先确定您是否下载python (3).pip (3).python-wheel 官网下载源码包openSSL 参考:用pip安装python 模块OpenSSL

  9. BZOJ2186: [Sdoi2008]沙拉公主的困惑(求[1,N!]与M!互素的个数)(线性筛)

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 6103  Solved: 2060[Submit][S ...

  10. CSS布局相关概要

    一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的 ...