java文件异步上传_HTML5+Java文件异步上传

HTML5经过了W3C的8年努力,终于正式推广了。这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?)。这个对象现在非常强大,可能会让所有使用jQuery的人全部重新拾起HTML原生的ajax技术。

闲话扯到这,接着是主题:我们今天要实现的就是下面的效果:

3fe276c7d0976b6f5fbd3af7be3fcd33.pngb019018d7e22e5d6a91bb516ba7819f8.png

这里面文件名、文件大小和MIME都是在选择文件时读取和现实,然后点击上传之后,上传进度实时显示,最后弹出右边的对话框确认文件信息(当然这里我为了方便直接把文件信息压到POST请求里面了,否则可能乱码,你也可以试试服务器端直接读取)。

接着,看到了这个强大的效果,我们简单地分析以下思路。

1、我们首先确定实现方式:Javascript将会显示在客户端显示进度(用的是XMLHTTPRequest Level II的几个新的Event),然后同时上传文件信息和文件本身,当然是异步的。

2、服务器端用一个servlet就行,这里使用commonfileupload接受上传。

然后看一下新的XMLHTTPRequest Level II,看看如何监视这一过程。

选择文件这里看到了一个onchange事件,这不是一个新事件,但在HTML5标准中被重新定义了,被用于文件被选择的时候调用。

69c5a8ac3fa60e0848d784a6dd461da6.png

function fileSelected() { //文件选择更改时调用的事件 var file = document.getElementById('fileToUpload').files[0]; //获得文件上传信息 if (file) { //如果用户选择了文件(没有选择的话,file就是null或是undefined,这样可以判断) var fileSize = 0; //文件大小 if (file.size > 1024 * 1024) //如果文件大小大于1MB fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100)

.toString()+ 'MB'; //转换文件大小并以MB单位显示 else //否则 fileSize= (Math.round(file.size * 100 / 1024) / 100).toString()+ 'KB'; //否则用KB单位显示 document.getElementById('fileName').innerHTML = ' ' + file.name; //显示文件名信息 document.getElementById('fileSize').innerHTML = ' ' + fileSize; //显示文件大小信息 document.getElementById('fileType').innerHTML = ' ' + file.type; //显示文件MIME信息 }

}

69c5a8ac3fa60e0848d784a6dd461da6.png

这个注释不是我加的,我也不清楚是谁加的……但是大家应该能看懂了。

69c5a8ac3fa60e0848d784a6dd461da6.png

function uploadFile() { //点击上传按钮时的时间 var fd = new FormData(); //FormData是Html5的新增类 fd.append("file", document.getElementById('fileToUpload').files[0]); //向表单数据添加文件主体 var file = document.getElementById('fileToUpload').files[0]; //获得文件主体 var xhr = new XMLHttpRequest(); //初始化ajax请求 xhr.upload.addEventListener("progress", uploadProgress, false); //HTML5的新的事件,上传进度改变时,只能在有文件上传的情况下调用 xhr.addEventListener("load", uploadComplete, false); //老事件,上传完成后 xhr.addEventListener("error", uploadFailed, false); //出错时 xhr.addEventListener("abort", uploadCanceled, false); //中断时 var caption=document.getElementById("caption").value; //标题(和文件上传无关紧要) fd.append("filename", file.name); //文件名添加到表单数据 fd.append("filesize", file.size); //文件尺寸添加到表单数据 fd.append("filetype", file.type); //MIME添加到表单数据 fd.append("caption", caption); //标题添加到表单数据 xhr.open("POST", "FileUpload",true); //准备上传 //xhr.setRequestHeader("Content-Type", "multipart/form-data"); //这句千万不能有!!!我也不知道为什么…… xhr.send(fd); //发出请求 }

69c5a8ac3fa60e0848d784a6dd461da6.png

点击上传按钮之后就是这段代码,FormData也是新加的对象,用于存储表单数据(某人加的注视应该够明白了……)。

接着我们看后台,后台使用commonfileupload接收(貌似说过了……),先把代码贴出来:

69c5a8ac3fa60e0848d784a6dd461da6.png

packageUpload;importjava.io.File;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.Iterator;importjava.util.List;importjavax.servlet.ServletContext;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.apache.commons.fileupload.FileItem;importorg.apache.commons.fileupload.FileItemFactory;importorg.apache.commons.fileupload.FileUploadException;importorg.apache.commons.fileupload.disk.DiskFileItemFactory;importorg.apache.commons.fileupload.servlet.ServletFileUpload;importLog.LogManager;public class FileUpload extendsHttpServlet {/*** Constructor of the object.*/ publicFileUpload() {super();

}/*** Destruction of the servlet.
*/ public voiddestroy() {super.destroy(); //Just puts "destroy" string in log//Put your code here }/*** The doPost method of the servlet.

*

* This method is called when a form has its tag value method equals to post.

*

*@paramrequest the request send by the client to the server

*@paramresponse the response send by the server to the client

*@throwsServletException if an error occurred

*@throwsIOException if an error occurred*/ public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {try{

request.setCharacterEncoding("UTF-8");

DiskFileItemFactory fif=newDiskFileItemFactory();

fif.setSizeThreshold(1024*1024);

ServletFileUpload sfu=newServletFileUpload(fif);

sfu.setSizeMax(1024*1024*1024);

List items=null;try{

items=sfu.parseRequest(request);

}catch(FileUploadException e) {//TODO Auto-generated catch block e.printStackTrace();

}

Iterator iter=items.iterator();

String filename="";

String filesize="";

String filetype="";

String caption="";

FileItem fi=null;while(iter.hasNext()) {

FileItem item=(FileItem) iter.next();if(item.isFormField()) {

String name=item.getFieldName();if(name.equals("filename")==true){

filename=item.getString("UTF-8");

}else if(name.equals("filesize")==true){

filesize=item.getString("UTF-8");

}else if(name.equals("filetype")==true){

filetype=item.getString("UTF-8");

}else if(name.equals("caption")==true){

caption=item.getString("UTF-8");

}

}else{

fi=item;

}

}

ServletContext application=getServletContext();

String path=(String) application.getAttribute("datapath")+"uploadpath"+application.getAttribute("systempi")+filename;

File f1=newFile(path);try{

fi.write(f1);

}catch(Exception e) {//TODO Auto-generated catch block e.printStackTrace();

}

response.setContentType("text/html; charset=UTF-8");

PrintWriter out=response.getWriter();

out.println("你上传了一个文件到服务器,下面将核实这些信息:");

out.println("1、文件名:"+filename);

out.println("2、文件大小:"+filesize);

out.println("3、文件MIME类型:"+filetype);

out.println("如果信息全部正确,说明文件成功上传了!");

String sqls1="";

LogManager.log("一个文件上传请求已经被受理!文件存储于:"+path);

out.flush();

out.close();

}catch(Exception e) {

LogManager.err(e.toString());

}

}/*** Initialization of the servlet.

*

*@throwsServletException if an error occurs*/ public void init() throwsServletException {//Put your code here }

}

69c5a8ac3fa60e0848d784a6dd461da6.png

还挺简单的,对吗?处理HTML5的上传请求和处理以前版本的上传请求基本一样,唯一需要注意的是:原来是你来拼接请求,所以说,位置由你决定,现在FormData拼接请求的字符串中项目的顺序和append的顺序有关,所以别搞错了(貌似我就搞错了,先添加了文件,然后在后台补救了一下……)。

基本上就这些代码,然后就是添加文件信息到数据库什么的,具体上传步骤查查commonfileupload的api好了。

整个项目不方便让大家下载,但这是一个OJ项目里面的,有兴趣的关注一下进入项目的git。另外如果转载的话,注明一下,谢谢!

from:http://www.cnblogs.com/zhangyutong926/p/4194726.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值