<%--
Created by IntelliJ IDEA.
User: Old Zhang
Date: 2018/12/27
Time: 11:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<td>
<form id="form1" enctype="multipart/form-data" method="post">
<input type="file" name="filePic" multiple="multiple" id="doc" style="width:300px;" onChange="javascript:setImagePreviews();" accept="image/*" />
</form>
<input type="button" value="上传" onclick="uploadPic();" style="margin-right: 3px;margin-top: 4px;float:right;line-height: 16px;" />
</td>
<td width="100px" height="100px" >
<div id="dd" style=" width:100px;"></div>
</td>
</body>
<script src="./js/jquery-2.1.4.js"></script>
<script type="text/javascript">
//下面用于多图片上传预览功能
function setImagePreviews(avalue) {
var docObj = document.getElementById("doc");
var dd = document.getElementById("dd");
dd.innerHTML = "";
var fileList = docObj.files;
for (var i = 0; i < fileList.length; i++) {
dd.innerHTML += "<div style='float:left' ><img id='img" + i + "' /> </div>";
var imgObjPreview = document.getElementById("img"+i);
if (docObj.files && docObj.files[i]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
}
else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc)
var localImagId = document.getElementById("img" + i);
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "100px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
function uploadPic(){
var docObj = document.getElementById("doc");
var fileList = docObj.files;
var formData = new FormData();
for (var i = 0; i < fileList.length; i++) {
formData.append("filePic",fileList[i]);
}
$.ajax({
url : 'uploadfarmfindPics?kind=thumbnail',
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行，请稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
},
error : function(responseStr) {
console.log("error");
}
});
}
</script>
</html>
