前端多文件上传
2019-03-15 本文已影响0人
丁小凯_eafe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img id="picshow" width="200" height="200" src="" />
<form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data">
<input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
<input id="btnImportOK" type="button" value="上传" />
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
("#btnImportOK").click(function () {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
type: "POST",
data: formData,
url: "/Home/Upload",
contentType: false,
processData: false,
}).success(function (data) {
if (data.status) {
// 记录当前时间戳
var start_time = new Date().getTime();
// 创建对象
var img = new Image();
// 改变图片的src
// img.src = data.url; 此处注释是因为上传保存是路径是本地磁盘 浏览器被阻止访问 所以用了一个远程图片
img.src = "http://a0.att.hudong.com/05/23/01300000727181126443238971302.jpg";
// 定时执行获取宽高
var check = function () {
console.log(img.width);
// 只要任何一方大于0
// 表示已经服务器已经返回宽高
if (img.width > 0 || img.height > 0) {
clearInterval(set);
if (img.width > 210 || img.height > 210 || img.width < 190 || img.height < 190) {
alert('建议列表图片尺寸为200*200');
return;
}
$("#picshow").attr("src", img.src);
$("#picshow").show();
}
};
var set = setInterval(check, 40);
} else {
console.log(data.msg);
}
}).error(function (data) {
alert(data);
console.log(data);
});
});
$("#picshow").hide();
});
</script>
</body>
</html>
