利用HTML5的新特性进行处理
1、所需jar包:commons-fileupload-1.2.2.jar 、commons-io-2.1.jar
2、环境:后台Java、前台动态语言JSP
3、运行环境:浏览器支持HTML 5新功能
1、添加几个需求元素:
<!-- 文件上传实现 -->
<input id="sampleFile" name="sampleFile" type="file" οnchange="fileSelected();" /> <br />
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div id="progressNumber"></div>
<input id="uploadBtn" type="button" value="Ajax Submit" onClick="performAjaxSubmit();"></input>
<div id="previewPic"></div><!-- 图片文件的预览 -->
2、编写脚本:
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('sampleFile').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; //fileType必须没有才行
}
}
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 performAjaxSubmit() {
var sampleFile = document.getElementById("sampleFile").files[0];
var formdata = new FormData();
formdata.append("sampleFile", sampleFile);
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","${ctx}/user/file.action?method:uploadFile=xx", true);
xhr.send(formdata);
xhr.onload = function(e) {
if (this.status == 200) {
eval("var json="+this.responseText);
//将图片显示出来
$("#previewPic").append("<img src='${ctx}/user/file.action?method:previewPic&fileId="+json.fileId+"' ><img>");
}
};
}
</script>
估计大家对于var formdata = new FormData();这段代码比较疑惑,这是HTML5新添的对象
3、后台fileAction处理函数:
public void uploadFile() throws ServletException, IOException {
String status = "";
String serverRealPath = "";
Long fileId = 0l;
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
String saveDirectory = "D:\\njupt\\blog\\";
File mir = new File(saveDirectory);
if(!mir.exists()) mir.mkdir();
try {
DiskFileItemFactory dtf = new DiskFileItemFactory(); //磁盘对象
ServletFileUpload upload = new ServletFileUpload(dtf);//声明解析request的对象
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : items) {
String fileName = item.getName();
InputStream content = item.getInputStream();
String tempName = System.currentTimeMillis() + ".blog.file";
status = "upload Success!";
serverRealPath = f.getAbsolutePath();
fileId = upf.getId();
}
} catch (FileUploadException e) {
throw new ServletException("Parsing file upload failed.", e);
}
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
response.getWriter().print("{status:'"+status+"',path:'"+serverRealPath+"',fileId:"+fileId+"}");
}
4、运行效果: