HTML5文件上传

利用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" onchange="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、运行效果：