ajax不通过页面表单来上传图片,通过js的FormData

关键代码

取input框里面的文件需要通过$("input[type='file']")[0].files[0]来获取 (这是jquery获取方法)

原生js获取方法是

var file = document.querySelector('input[type=file]').files[0];//IE10以下不支持

 注意上传文件必须添加

         processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
		 contentType : false, // 不设置Content-type请求头

	//$(this).prev()[0] --->jquery对象转dom对象
			var file=$(this).prev()[0].files[0];
			var id=$(this).next().val();
			var form = new FormData();
			form.append('file', file);//上传的文件： 键名，键值
			form.append('id', id);//用户id
			$.ajax({
				type:'post',
				url:"file/uploadFile",
				data:form,
				async: true,//默认true，false同步提交
				processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
		        contentType : false, // 不设置Content-type请求头
				success:function(data){
					alert("上传成功");
				}
			});

完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		$(".upload").click(function(){
			//$(this).prev()[0] --->jquery对象转dom对象
			var file=$(this).prev()[0].files[0];
			var id=$(this).next().val();
			var form = new FormData();
			form.append('file', file);//上传的文件： 键名，键值
			form.append('id', id);//用户id
			$.ajax({
				type:'post',
				url:"file/uploadFile",
				data:form,
				async: true,//默认true，false同步提交
				processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
		        contentType : false, // 不设置Content-type请求头
				success:function(data){
					alert("上传成功");
				}
			});
		});
	})
</script>
</head>
<body>
	<table>
		<tr>
			<td>序号</td>
			<td>用户名</td>
			<td>头像</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${list }" var="user" varStatus="vs">
			<tr>
			<td>${vs.index+1 }</td>
			<td>${user.name }</td>
			<td>
			<c:if test="${user.img !=null }">
				<img alt="" src="${user.img}">
			</c:if>
			</td>
			<td>
			<input type="file" name="file">
			<a href="#" class="upload">上传图片</a>
			<input type="hidden" value="${user.id}">
			</td>
		</tr>
		</c:forEach>
	</table>
</body>
</html>

ajax不通过页面表单来上传图片,通过js的FormData

猜你喜欢