异步图片上传

最新推荐文章于 2022-05-11 17:25:09 发布

CC_小硕

最新推荐文章于 2022-05-11 17:25:09 发布

阅读量251

点赞数 1

分类专栏：基础

本文链接：https://blog.csdn.net/cs729298/article/details/73609272

版权

基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="index.php" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="picture" value="uploadpic">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18%" background="" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">上传照片</span></div></td>
<td bgcolor="#FFFFFF">
<input type="file" id="pic" name="pic" />
<input type="button" value="上传" οnclick="doUpload();">
</td>
</tr>
</table>
</form>
<script src="https://code.jquery.com/jquery.js"></script>

<script type="text/javascript">
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'index.php' , /*这是处理文件上传的servlet*/
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
dataType:'json',
success: function (returndata) {
document.getElementById("showpic").src="<%=basePath%>UploadImage?picture=showpic";/*这是预览图片用的，自己在文件上传表单外添加*/
},
error: function (returndata) {
alert(returndata);
}
});
}
</script>
</body>
</html>