图片上传预览（由于不是专业的前端所以写的不好的地方请多多指教）

本文链接：https://blog.csdn.net/yongqi_wang/article/details/79882467

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="你本地的jquery文件路径"></script>
</head>
<body>
<input type="file" id="file2" name="file2" accept="image/*" οnchange="preview(this)">
<table border='1px' cellspacing='0' cellpadding='0' width='200px' align='center'>
<tr id="preview"></tr>
</table>
<script>
var listImg = [];
function deleteImg(a){
var parent = $(a).parent();
listImg.splice(parent.index(),1);
parent.remove();
}
function preview(file) {
var prevDiv = document.getElementById('preview');
listImg[$("#preview td").size()] = $(file)[0].files[0]
console.log(listImg);
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
console.log();
prevDiv.innerHTML += '<td align="center"><span>'+file.files[0].name+'    </span>'
+'<a href="javascript:" οnclick="deleteImg(this)">删除</a><br/>'
+'<img name="pic" height=100 src="' + evt.target.result + '" /></td>';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader('
+'sizingMethod=scale,src=\''+ file.value + '\';height:100px;"></div>';
}
}
function save(){
var formdata=new FormData( );
for(var i = 0;i <= $("#preview td").size();i++){
formdata.append("file"+i , listImg[i]);//获取文件
}
$.ajax({
url:"../service/upload",
type:'post',
dataType:"json",
contentType : false,
processData : false,
data:formdata,
success:function(data){}
});
}
</script>
</body>
</html>