ajax异步上传文件FormDate方式，html支持才可使用

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今天需要做一个头像的预览功能，所以我想到了异步上传文件。

总结几点：

异步上传难点：

文件二进制流如何获取

是否需要设置表单的头，就是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="">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<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")[].files[]);//把该文件对象放入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="width:180px;height:180px;border:solid 1px;">
<img id="upload" alt="" style="width: 180px; height: 180px"
src="${pageContext.request.contextPath }/images/defaultphoto.jpg">

<input id="fileToUpload" style="display: none" type="file" name="myphoto">
</div>
</div>
</body>
</html>