[html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段
功能：
1.多文件文件拖拽上传，file input 多文件选择
2.html5 File Api 异步FormData，blob上传，图片显示
3.java端接受
核心代码：
1.拖拽代码段：
<div id="dropzone">
<div>Drag & drop your file here...</div>
<div id='showFile'></div>
<div style='clear: both'></div>
</div> <script>
/*function for drag and drop*/
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.preventDefault();
event.stopPropagation();
}
dropzone.ondrop = function(event) {
event.preventDefault();
var filesArray = event.dataTransfer.files;
for ( var i = 0; i < filesArray.length; i++) {
var fObj = new fileObj(filesArray[i], idTmp);
// to do tasks with dropData
}
event.stopPropagation();
}
}
</script>
file input 多文件选择：
<p>
Upload File: <input id='uploadFile' type="file" name="file" multiple />
</p> <script>
$("#uploadFile").change(function(e) {
event.preventDefault();
var filesArray = e.target.files;
for ( var i = 0; i < filesArray.length; i++) {
var fObj = new fileObj(filesArray[i], idTmp);
// to do tasks with dropData
idTmp++;
}
event.stopPropagation();
});
</script>
2.html5 File Api 异步上传:
1).使用FormData上传
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title> <script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
} function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
} function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
} function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
} function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
} function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form> </body>
</html>
2).使用blob，readAsBinaryString上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 File Upload[By WangXinsheng]</title>
<script src="../js/jquery-1.11.1.min.js"></script>
</head>
<style>
#dropzone {
margin-top: 10px;
width: 500px;
min-height: 300px;
height: 100%;
border: 1px dotted grey;
} header {
font-weight: bold;
} .uploadFile {
display: inline;
float: left;
width: 45%;
border: 1px solid gray;
margin: 5px;
min-height: 20px;
padding-bottom: 5px;
padding-left: 5px;
} .uploadFile p {
margin: 2px;
} .uploadFile progress {
-webkit-appearance: none;
}
.uploadFile .ok{
cursor:pointer;
} .uploadFile ::-webkit-progress-inner-element { } .uploadFile ::-webkit-progress-bar {
background: white;
border: 1px solid gray;
} .uploadFile ::-webkit-progress-value {
background: green;
} .uploadFile ::-moz-progress-bar {
background: white
} .uploadFile ::-ms-fill {
background: green;
}
</style>
<body>
<header>HTML5 File Upload</header>
<p>
Upload File: <input id='uploadFile' type="file" name="file" multiple />
</p> <div id="dropzone">
<div>Drag & drop your file here...</div>
<div id='showFile'></div>
<div style='clear: both'></div>
</div>
<script>
var oneFileDom = "<div class='uploadFile' id='uf_{%id%}'>"
+"<p>{%name%}</p>"
+"<progress width='100%'></progress>"
+"<span class='ok' style='display:none;padding-left:10px;color:green;font-weight:bold__:bold;'>转换</span>"
+"</div>";
var idTmp = 0;
/*all file obj list*/
var fileObjLst = [];
/*file object*/
var fileObj = function(file, id) {
this.fileName;
this.file = file;
this.uploadSize = 0;
this.finishFlg = false;
this.sliceStart = 0;
this.maxPiece = 0;
this.blockCount = 0;
this.blockCur = 0;
this.reader = null;
this.dom;
this.id = id;
this.xhr;
}
fileObj.prototype.init = function() {
var tmpPiece = Math.ceil(this.file.size * 0.5);
this.maxPiece = tmpPiece > 1024 * 1024 * 0.2 ? 1024 * 1024 * 0.2
: (tmpPiece < 1024 * 1024 * 0.1 ? 1024 * 1024 *0.1: tmpPiece);
this.blockCount = Math.ceil(this.file.size / this.maxPiece);
this.sliceEnd = this.maxPiece;
this.fileName = new Date().getTime();
$("#showFile").prepend(
$(oneFileDom.replace('{%id%}', this.id).replace("{%name%}",
this.file.name)));
}
fileObj.prototype.send = function() {
console.log(this.id);
$("#uf_" + this.id).find("progress").attr("value", '0');
$("#uf_" + this.id).find("progress").attr("max",
this.file.size + ''); this.reader = new FileReader(); this.Bind(this.reader, "loadend", this.onloadend, this);
this.Bind(this.reader, "loadstart", this.onloadstart, this);
this.Bind(this.reader, "progress", this.onprogress, this);
this.Bind(this.reader, "load", this.onload, this); var blob, file = this.file;
console.log(file);
try {
blob = sliceBlob(file, this.sliceStart, this.sliceStart
+ this.maxPiece + 1);
} catch (e) {
console.log("error:" + e);
}
this.sliceStart = this.sliceStart + this.maxPiece + 1;
this.reader.readAsBinaryString(blob);
}
fileObj.prototype.onload = function() {
// 这个事件在读取成功结束后触发
console.log("load complete");
}
fileObj.prototype.onloadstart = function() {
// 这个事件在读取开始时触发
console.log("onloadstart");
//document.getElementById("bytesTotal").innerHTML = file.size;
}
fileObj.prototype.onprogress = function(p) {
// 这个事件在读取进行中定时触发
console.log("onprogress");
//document.getElementById("bytesRead").textContent = p.loaded;
}
fileObj.prototype.onloadend = function() {
// 这个事件在读取结束后，无论成功或者失败都会触发
//console.log(this.id);
if (this.reader.error) {
console.log(this.reader.error);
} else {
var url1 = "/ExcelToWord/morning?over=0&fileName=["
+ this.fileName + "]" + this.file.name, url2 = "/ExcelToWord/morning?over=1&fileName=["
+ this.fileName + "]" + this.file.name, url = url1;
this.blockCur++; this.uploadSize = ((this.sliceStart - 1) < this.file.size) ? (this.sliceStart - 1)
: this.file.size;
$("#uf_" + this.id).find("progress").attr("value",
this.uploadSize + '');
console.log(this.uploadSize, this.file.size);
if (this.blockCur > this.blockCount) {
//$("#uf_"+this.id).find(".ok").show();
console.log('over');
return;
} else if (this.blockCur == this.blockCount) {
// last piece
console.log('last');
url = url2;
}
console.log(this.blockCur, this.blockCount);
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
var me = this;
this.xhr = new XMLHttpRequest();
this.xhr.open("POST", url);
this.xhr.overrideMimeType("application/octet-stream");
this.xhr.sendAsBinary(this.reader.result);
this.Bind(this.xhr, "readystatechange",
this.onreadystatechange, this);
}
}
fileObj.prototype.onreadystatechange = function() {
var me = this;
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
console.log("upload complete");
console.log("response: " + this.xhr.responseText);
console.log("hello" + me.id);
var json = eval("(" + this.xhr.responseText + ")");
console.log(json.over);
if (json.over == "1") {
$("#uf_" + this.id).find(".ok").attr("serverName",
json.data);
$("#uf_" + this.id).find(".ok").show();
console.log('over');
return;
}
var blob, file = me.file;
try {
blob = sliceBlob(file, me.sliceStart, me.sliceStart
+ me.maxPiece + 1);
} catch (e) {
console.log("error:" + e);
}
me.sliceStart = me.sliceStart + me.maxPiece + 1;
me.reader.readAsBinaryString(blob);
}
}
}
fileObj.prototype.Bind = function(control, eventName, callBack, scope) {
if (!scope) {
scope = window;
}
$(control).bind(eventName, function() {
callBack.apply(scope, arguments);
});
}
function sliceBlob(blob, start, end, type) { type = type || blob.type; if (blob.mozSlice) {
return blob.mozSlice(start, end, type);
} else if (blob.webkitSlice) {
return blob.webkitSlice(start, end, type);
} else if (blob.slice) {
return blob.slice(start, end, type);
} else {
throw new Error("This doesn't work!");
}
}
/*function for drag and drop*/
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.preventDefault();
event.stopPropagation();
}
dropzone.ondrop = function(event) {
event.preventDefault();
var filesArray = event.dataTransfer.files;
for ( var i = 0; i < filesArray.length; i++) {
var fObj = new fileObj(filesArray[i], idTmp);
fObj.init();
fObj.send(fObj);
fileObjLst.push(fObj);
idTmp++;
}
event.stopPropagation();
}
$("#uploadFile").change(function(e) {
event.preventDefault();
var filesArray = e.target.files;
for ( var i = 0; i < filesArray.length; i++) {
var fObj = new fileObj(filesArray[i], idTmp);
fObj.init();
fObj.send(fObj);
fileObjLst.push(fObj);
idTmp++;
}
event.stopPropagation();
});
} if (window.navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
function byteValue(x) {
return x.charCodeAt(0) & 0xff;
}
var ords = Array.prototype.map.call(datastr, byteValue);
var ui8a = new Uint8Array(ords);
this.send(ui8a.buffer);
}
}
</script>
</body>
</html>
3).Image 文件上传本地预览
// 图片文件
var reader = new FileReader();
reader.readAsDataURL(imageFile);
// reader读取完成的回调，设置src属性，显示图片.
// 或者设置css的背景属性都可
reader.onload = function(e) {
document.getElementById('imageId').src = e.target.result;
}
3.java端接受
@RequestMapping("/url")
@ResponseBody
public Map<String, Object> handleRequest(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String fileName = request.getParameter("fileName");
fileName = new String(fileName.getBytes("ISO-8859-1"),"UTF-8");
String overFlg = request.getParameter("over"); // 0:go on;1:over
System.out.println("get: " + fileName);
byte[] buf = new byte[1024];
File file = new File(ExcelTmpPath + /*"[" + UUID.randomUUID().toString()
+ "]" +*/ fileName);
InputStream is = null;
BufferedOutputStream fileOut = new BufferedOutputStream(
new FileOutputStream(file, true));
try {
is = request.getInputStream();
while (true) {
int bytesIn = is.read(buf, 0, 1024);
System.out.println(bytesIn);
if (bytesIn == -1) {
break;
} else {
fileOut.write(buf, 0, bytesIn);
}
}
fileOut.flush();
fileOut.close();
System.out.println(file.getAbsolutePath());
} catch (IOException e) {
System.out.println("error info");
}
Map<String, Object> map = new HashMap<String, Object>();
map.put("over", overFlg);
map.put("data", fileName);
return map;
}
[html5+java]文件异步读取及上传核心代码的更多相关文章
- ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传
软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...
- springmvc附件上传核心代码
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.Comm ...
- Android中实现异步轮询上传文件
前言 前段时间要求项目中需要实现一个刷卡考勤的功能,因为涉及到上传图片文件,为加快考勤的速度,封装了一个异步轮询上传文件的帮助类 效果 先上效果图 设计思路 数据库使用的框架是GreenDao,一个 ...
- Java模拟客户端向服务器上传文件
先来了解一下客户端与服务器Tcp通信的基本步骤: 服务器端先启动,然后启动客户端向服务器端发送数据. 服务器端收到客户端发送的数据,服务器端会响应应客户端,向客户端发送响应结果. 客户端读取服务器发送 ...
- Java模拟表单POST上传文件
JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...
- HTML5按比例缩略图片并上传的实例
<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...
- 求大师点化,寻求大文件(最大20G左右)上传方案
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- PHP之文件的锁定、上传与下载
小结文件的锁定机制.上传和下载 1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚 ...
随机推荐
- QQ左侧滑动显示之按钮切换
上一篇为大家介绍了关于自定义属性设置方法,本篇我将为大家介绍一下如何通过按钮来控制Menu的显示和隐藏,为了达到这个效果我们需要在SlidingMenu中添加三个方法,用来达到实现上述效果的目的. 我 ...
- java中finally和return的执行顺序
注意:return的位置... 从这几个例子中可以看到,如果try之前没有有条件的return,则try..catch..finally语句块中的语句都是顺序执行(如果try中或者catch中 有re ...
- JavaScript禁用页面刷新
JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...
- 转载--linux filesystem structures
In this article, let us review the Linux filesystem structures and understand the meaning of individ ...
- PHP Log时时查看小工具
以前Log都是打印在一个文档中,然后打开文件夹,最后打开文档查看里面的内容,每次打开文件夹感觉很烦. 前些日子看到同事开发.NET的时候,用他自己的一个小工具能够时时查看到Log的内容,非常方便,所以 ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- JAVA 设计模式 职责链模式
用途 职责链模式 (Chain Of Responsibility) 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这个对象连成一条链,并沿着这条链传递该请求,直到有一个 ...
- Elasticsearch集群管理
ES通过设置[节点的名字]和[集群的名字],就能自动的组织相同集群名字的节点加入到集群中,并使很多的技术对用户透明化. 如果用户想要管理查看集群的状态,可以通过一些REST API来实现. 其他的ES ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- HT for Web自定义3D模型的WebGL应用
有不少朋友询问<HTML5 Web 客户端五种离线存储方式汇总>文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到HT for We ...