今天需要做一个头像的预览功能，所以我想到了异步上传文件。
总结几点：
异步上传难点：
文件二进制流如何获取
是否需要设置表单的头，就是content-Type那里。异步，所以无所谓了吧。
其他就差不多了。
直接上demo：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/Utils.js"></script> <script type="text/javascript"> $(function(){ $("#upload").on('click', function() { $('#fileToUpload').click(); }); //选择文件之后执行上传 $('#fileToUpload').change(function() { var formData = new FormData();//生成空的form对象 formData.append("myphoto",$("#fileToUpload")[0].files[0]);//把该文件对象放入formData $.ajax({ url:g_basePath+"/FileUploadServlet", data:formData, type:"POST", processData:false, //这个和jquery中formData有关，去除会报错。具体没研究 contentType:false, //这个和头contentType有关，去除后在后台无法获得上传的二进制流 success: function (data) { //把图片替换 $("#upload").attr("src", data); } }); }); }); </script> </head> <body> <div> <div style="180px;height:180px;border:solid 1px;"> <img id="upload" alt="" style=" 180px; height: 180px" src="${pageContext.request.contextPath }/images/defaultphoto.jpg"> <!-- 隐藏file标签 --> <input id="fileToUpload" style="display: none" type="file" name="myphoto"> </div> </div> </body> </html>
上传时文件使用的是FormData对象，有时间去研究。有人看了我的之后研究了希望回馈一份更好的异步文件上传给我哦，原生js的最好也来一份。哈哈，反哺。