最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下。
总体思路如下:
1、对于支持XMLHttpRequest2的浏览器使用FormData通过ajax上传
2、对于ie10一下的浏览器使用iframe异步上传,还需后台服务器做相应处理,这部分也是dojo/request/iframe上传文件的原理。
 
一、使用FormData上传文件
  FormData最频繁使用的功能就是表单序列化及创建与表单格式相同的数据。append方法接收两个参数,字段名与字段值,字段值可以是FileBlob、String.
 var data = new FormData(form);
data.append("name", "woodtree");
data.append(file.name, file);
data.append(name, Blob);

  如果直接向FormData的构造函数中传入表单元素,可以将表单元素的数据预先填入。

 new FormData(document.forms[0])

  FormData的另一个便利之处就是不用明确指定Content-Type头部,xhr对象能够根据FormData实例自动配置适当的头部。下面是一个简单的上传文件demo。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>FormData</title>
</head>
<body>
<form id="uploader" action="/upload" enctype="multipart/form-data">
<input id="app" type="file" multiple>
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById('uploader');
var app = document.getElementById('app');
form.addEventListener('submit', function(evt) {
evt.preventDefault();//组织页面刷新
var data = new FormData();
for (var i = 0, len = app.files.length; i < len; i++) {
//file property: name, size, type, lastModifiedDate
var file = app.files[i];
data.append(file.name, file);
} var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert(JSON.parse(xhr.responseText).success);
};
xhr.onerror = function(err) {
console.error(err);
};
xhr.open('post', './upload', true);
xhr.send(data);
}, false);
</script>
</body>
</html>

  server端代码使用formidable模块将文件暂存在tmp目录下。

 var http = require('http');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');
var request = require('request');
var formidable = require('formidable'); http.createServer(function(req, res){
var _url = url.parse(req.url);
if (_url.pathname === '/index') {
fs.readFile('./index.html', function(err, data) {
res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8"});
res.write(data);
res.end();
});
} else if (_url.pathname === '/upload') {
console.log(req.headers['content-type']);
handle(req, res);
}
}).listen(8888);
var handle = function(req, res) {
if (req.headers['content-type'].indexOf('multipart/form-data') >= 0) {
var formStream = new formidable.IncomingForm();
formStream.uploadDir = './tmp';
formStream.parse(req, function(err, fields, files) {
res.writeHead(200, {"Content-Type": "application/json"});
if (err) {
res.write('{"success": false}');
} else {
res.write('{"success": true}');
}
res.end();
});
}
}

  查看请求,xhr自动为我们设置请求头部。

  兼容性问题

 
二、使用iframe上传文件
  兼容旧版本的ie浏览器实现无刷新上传,只能借由iframe来实现,大多数类库的做法是动态插入一个iframe元素,将form元素的target属性设置为新添加的iframe,这样只刷新了iframe的内容而避免页面跳转到form元素的action属性所指定的url。这里我们根据dojo/request/iframe模块的原理来实现上传文件。
  该模块需要后台返回响应的格式来配合。将需要返回的信息放在`textarea`标签内。然后绑定iframe的load事件,通过`doc.getElementsByTagName('textarea')`取得textarea中的数据。
 <html>
<body>
<textarea>
uploadInfo
</textarea>
</body>
</html>

  下面是简单的demo

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>ArcGIS Web Application</title>
</head>
<body class="claro">
<form id="uploader" method="post" action="/upload" target="appFrame" encoding="multipart/form-data" enctype="multipart/form-data">
<input id="appInput" name="app" type="file" >
</form>
<iframe id="frame" name="appFrame" src="" style="visibility:hidden;"></iframe>
<script type="text/javascript">
var upload = document.getElementById('placeholder');
var uploader = document.getElementById('uploader');
var app = document.getElementsByName('app')[0];
var clickLietener = function() {
app.click();
}
var changeListener = function() {
uploader.submit();
}
if (app.addEventListener) {
app.addEventListener('change', changeListener, false);
} else if (app.attachEvent) {
app.attachEvent('onchange', changeListener);
}
var appFrame = document.getElementById('frame');
var listener = function() {
var doc = appFrame.contentWindow.document;
var textAreas = doc.getElementsByTagName('textarea');
if (textAreas && textAreas.length > 0) {
var response = textAreas[0].value;
alert(response);
}
}
if (appFrame.addEventListener) {
appFrame.addEventListener('load', function(evt) {
listener();
}, false);
} else if(appFrame.attachEvent) {
appFrame.attachEvent('onload', function() {
listener();
});
} </script>
</body>
</html>
 var http = require('http');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');
var formidable = require('formidable'); http.createServer(function(req, res) {
var _url = url.parse(req.url);
if (_url.pathname === '/index') {
fs.readFile('./index.html', function(err, data) {
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8"
});
res.write(data);
res.end();
});
} else if (_url.pathname === '/upload') {
var formStream = new formidable.IncomingForm();
formStream.uploadDir = './tmp';
formStream.parse(req, function(err, fields, files) {
console.log(fields);
console.log(files);
var info = null;
var accept = req.headers.accept;
if (err) {
info = {success: false};
} else {
info = {success: true};
}
if (accept.indexOf('application/json') > -1) {
res.writeHead(200, {
"Content-Type": "application/json;charset=utf-8"
});
res.write(JSON.stringify(info));
} else {
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8"
});
var responseText = '<html><body><textarea>' +
JSON.stringify(info) +
'</textarea></body></html>';
res.write(responseText);
}
res.end();
});
}
}).listen(8888);

  后台代码需要注意Content-Type响应头的设置,ie8、9碰到不知如何渲染的MIME类型会把它当成文件下载下来。这里这里

  不知大家有没有注意到,上面的demo是一步上传,选择好文件后直接上传到服务器,ie8以上的浏览器没问题,如果是在ie8中情况就有些棘手。ie中文件上传控件长成这个样子,单击一下button会弹出文件选择框,如果单击的是text部分,没有反映,你需要双击才会弹出选择框。一个办法是让鼠标尽量单击button部分,button的大小跟font-size有关。但如果你的可点击区域太大。。。。。

  所幸还是有解决办法的,这时需要在form中加一个label标签,for属性指向file。这样点击label时会触发for指向元素的click事件,这时label的自然行为。同时把file移除屏幕外。注意一定不能用input[type=button],在点击button时候调用file的click事件,然后在file change事件中调用form.submit方法,这种行为在ie中是被禁止的,回报“access denied”错误。

  

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>ArcGIS Web Application</title>
</head>
<body class="claro">
<form id="uploader" method="post" action="/upload" target="appFrame" encoding="multipart/form-data" enctype="multipart/form-data">
<label id="placeholder" for="appInput">upload</label>
<input id="appInput" name="app" type="file" style="position:absolute;left:-800px;">
</form>
<iframe id="frame" name="appFrame" src="" style="visibility:hidden;"></iframe>
<script type="text/javascript">
var upload = document.getElementById('placeholder');
var uploader = document.getElementById('uploader');
var app = document.getElementsByName('app')[0];
var changeListener = function() {
uploader.submit();
}
if (app.addEventListener) {
app.addEventListener('change', changeListener, false);
} else if (app.attachEvent) {
app.attachEvent('onchange', changeListener);
}
var appFrame = document.getElementById('frame');
var listener = function() {
var doc = appFrame.contentWindow.document;
var textAreas = doc.getElementsByTagName('textarea');
if (textAreas && textAreas.length > 0) {
var response = textAreas[0].value;
alert(response);
}
}
if (appFrame.addEventListener) {
appFrame.addEventListener('load', function(evt) {
listener();
}, false);
} else if(appFrame.attachEvent) {
appFrame.attachEvent('onload', function() {
listener();
});
} </script>
</body>
</html>

参考资料

文件上传的渐进式增强 - 阮一峰的网络日志

Uploading Files with AJAX

ie javascript form submit with file input

Javascrpt无刷新文件上传的更多相关文章

  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  3. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  4. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  5. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  6. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

  7. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  8. jquery无刷新文件上传 解决IE安全性问题

    很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...

  9. php利用iframe实现无刷新文件上传功能

    上传原理很简单就是利用表单的打开方式为iframe的name名,这样就可以在当前页面的iframe打来了,实现文件上传,再利用js返回上传结果. form target .在 action 属性中规定 ...

随机推荐

  1. Tomcat发生异常

    The Apache Tomcat Native library which allows optimal performance in production environments was not ...

  2. [QT]Qt+VS2012+Win8 64Bit安装

    学习Qt鸟,当年没听@Coding_Peon(http://weibo.com/u/1764451551?topnav=1&wvr=5&topsug=1)话好好学习QT和Python之 ...

  3. 关于ABP——领域服务的思考

    我在刚接触ABP的时候一直有一个疑问--有了应用服务,为什么还需要领域服务呢? 领域服务和应用服务对比 领域服务 应用服务 返回值 Entity DTO 被表现层调用 不可以(非强制) 可以 在ABP ...

  4. [php]通过http post发送json数据

    function http_post_data($url, $data_string) { $ch = curl_init(); curl_setopt($ch, CURLOPT_POST, 1); ...

  5. Python的一些高级特性以及反序列化漏洞

    0x01 简述 文章主要记录一下python高级特性以及安全相关的问题 python作为脚本语言,其作为高级语言是由c语言开发的,关于python的编译和链接可以看向这里https://github. ...

  6. Oracle 11gR2使用RMAN duplicate复制数据库

    11g的RMAN duplicate 个人感觉比10g的先进了很多,10g需在rman备份的基础上进行复制,使用RMAN duplicate创建一个数据完全相同但DBID不同的数据库.而11g的RMA ...

  7. 【laravel5.4】安装predis

    1.服务器先安装redis-server,这是毋庸置疑的!!! 2.服务器开启redis-server,配置相关参数 3.laravel执行 : $  yourPhpPath composer.pha ...

  8. Spark 保存文件 自定义分隔符

    Spark 保存文件 调整分隔符 废话 找了半天没找到,在某个地方看到了类似的(文中说的是读取的时候指定),试了一下保存,发现也好用,详细如下. 用法 df.write.option("de ...

  9. yii2 数据库查询

    下面介绍一下 Yii2.0 对数据库 查询的一些简单的操作 User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的 ...

  10. ArrayList底层实现

    ArrayList 底层是有数组实现,实际上存放的是对象的引用,而不是对象本身.当使用不带参的构造方法生成ArrayList对象时,实际会在底层生成一个长度为10的数组 当添加元素超过10的时候,会进 ...