两种文件上传的实现-Ajax和form+iframe
前言
话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了。HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹利用file控件实现,JS代码寥寥,想不让人称赞都难啊!
HTML5Ajax上传
html5的上传实现,是需要file控件以及XMLHttpRequest请求。下面是我封装的一个上传插件:
function fileUpload(options) {
var opts = options || {};
var func = function() {};
this.fileInput = opts.fileInput || null;
this.url = opts.url || '';
this.fileList = [];
this.onFilter = opts.onFilter || function(f) {return f;}; //选择文件组的过滤方法
this.onSelect = opts.onSelect || func; //文件选择后
this.onProgress = opts.onProgress || func; //文件上传进度
this.onSuccess = opts.onSuccess || func; //文件上传成功时
this.onFailure = opts.onFailure || func; //文件上传失败时;
this.onComplete = opts.onComplete || func; //文件全部上传完毕时
this.init();
}
fileUpload.prototype = {
dealFiles: function(e) { //获取要上传的文件数组(用户选择文件后执行)
var files = e.target.files || e.dataTransfer.files;
this.fileList = this.onFilter(files);
for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值
file.index = i;
}
this.onSelect(this.fileList);
return this;
},
removeFile: function(fileDelete) { //删除某一个文件
var arrFile = [];
for(var i = 0, file; file = this.fileList[i]; i++){
if (file != fileDelete) {
arrFile.push(file);
}
}
this.fileList = arrFile;
return this;
},
removeAll: function() { //清空文件队列
this.fileList = [];
return this;
},
uploadFile: function() { //上传文件
var me = this;
for(var i = 0, file; file = this.fileList[i]; i++){
(function(file) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function(e) { // 上传中
me.onProgress(file, e.loaded, e.total);
}, false);
xhr.onreadystatechange = function(e) { // 文件上传成功或是失败
if (xhr.readyState == 4) {
if (xhr.status == 200) {
me.onSuccess(file, xhr.responseText);
me.removeFile(file);
if (!me.fileList.length) {
me.onComplete(); //上传全部完毕。执行回调
}
} else {
me.onFailure(file, xhr.responseText);
}
}
};
// 开始上传
formData.append('file', file);
xhr.open("POST", me.url, true);
xhr.send(formData);
}
})(file);
}
},
init: function() {
var me = this;
//文件选择控件选择
if (me.fileInput) {
me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false);
}
}
};
相信大家也看到了,代码中出现了formData
,这就是html5的神奇之处了。借助formData轻松实现异步无刷新支持预览图片的多文件上传功能。而且,令人欣慰的是,现在已经有很多浏览器都已经支持html5了。
但是!!!ie9以下的版本不支持呀!!
除此之外,上面的方法还有一个弊端,因为使用了ajax的上传方式,所以不能支持跨域上传,如果必须要满足这两个业务场景,那就试试下面的方法吧,借助form和iframe来实现上传。下面来详细看一下:
form表单提交到iframe
html代码:
<iframe name="demoIframe" style="display:none"></iframe>
<form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
<input class="filename" type="file" name="fileLabel">
<input type="submit" value="提交">
</form>
我们点击提交,可以看到下面的请求:
已经把文件上传。那么,加入这个upload.php接口可用,而且假如上传成功后,会返回:
{
"code": "200",
"success": true,
"data": {
...
}
}
我们要怎么去获取返回值,从而进行下一步的操作呢?因为我们是上传到了iframe中,所以我们只需要监听iframe的load事件,如果有返回值了,我们就能获取到,从而进行进一步处理。看js代码:
$('iframe').on('load', function() {
var responseText = $('iframe')[0].contentDocument.body.textContent;
var responseData = JSON.parse(responseText) || {};
if (responseData.isSuccess == true || responseData.code == 200) {
//success
} else {
//error
}
});
这样我们就完成了一个支持所有浏览器的上传文件操作了。还是很简单的吧_
两种文件上传的实现-Ajax和form+iframe的更多相关文章
- Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...
- 基于python的selenium两种文件上传操作
方法一.input标签上传 如果是input标签,可以直接输入路径,那么可以直接调用send_keys输入路径,这里不做过多赘述,前文有相关操作方法. 方法二.非input标签上传 这种上传方 ...
- python3 常见的两种文件上传方法
1.上传页面带input type格式send_keys传值方式上传不能大于60k(具体看开发设置的value)文件大小 fx.find_element_by_id('xx').send_keys(r ...
- egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...
- 两种方法上传本地文件到github
https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...
- 两种方法上传本地文件到github(转)
自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...
- iframe 模拟ajax文件上传and formdata ajax 文件上传
对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe 的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...
- .NET两种常见上传下载文件方法
1.FTP模式 代码如下: (1)浏览 /// <summary> /// 浏览文件 /// </summary> /// <param name="tbCon ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
随机推荐
- 虚拟机网络驱动(共享文件夹)不见了的解决方案-适用于win7~win10 and Windows Server 2008~Windows Server 2012R2
具体看图 手动打入下面选择部分的字符 \\vmware-host\Shared Folders 然后就可以了,这边有个红叉,重启后就没了 重启后
- C#设计模式系列:状态模式(State)
1.状态模式简介 1.1>.定义 状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
- Python第一天 - 迭代
(一)索引迭代 Python中,迭代永远是取出元素本身,而非元素的索引. 如果要取索引可以用enumerate()函数 例: L = ['Adam', 'Lisa', 'Bart', 'Paul'] ...
- 针对格式文件,Python读取一定大小的文件内容
由数据库导出的数据是格式化数据,如下所示,每两个<REC>之间的数据是一个记录的所有字段数据,如<TITLE>.<ABSTRACT>.<SUBJECT_COD ...
- [备忘] Automatically reset Windows Update components
这两天遇到Windows 10的更新问题,官方有一个小工具,可以用来修复Windows Update的问题,备忘如下 https://support.microsoft.com/en-us/kb/97 ...
- node-mysql 在4.2.0的时候遇到的错误
实际上这个问题折腾了几天.前一阵因为升级到了最新的4.2.0,发现mysql的应用就出错了,错误消息也比较奇怪 Handshake Inactivity Timeout - PROTOCOL_SEQU ...
- Python学习第一弹——Python环境搭建
一.Python简介: Python,是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.Python语法简洁而清晰,具有 ...
- C# 保护Excel文档
C# 保护Excel文档 说到保护excel文档,我们首先想到的是密码保护的方式,但excel与word有点不一样,一般情况下,每个excel工作薄都或多或少地含有一定数量的工作表,因此保护excel ...
- SQL Server利用递归把所有【子部门员工】汇总到【一级根节点部门】
前言 说起这个需求,有点反常规,左边是组织机构树,右边是组织机构对应的员工列表.点击左侧组织机构时传一个组织机构ID,然后查询该组织机构以及其所属的一级节点,如果有部门直属单击节点组织机构,则挂出来员 ...
- Android置底一个View后运行报错
大致问题是 放一个LinearLayout ID @+id/layout ,然后在它上面放一个button 设置android:layout_above="@id/layout" ...