正文
原生js上传图片时的预览
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>checkbox -value </title>
<link rel="stylesheet" href="">
<script src='./jquery-1.7.1.min.js'></script>
<style type="text/css">
.showImg {} .showImg img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="main">
<label for="imgfile"><span class="fakeButton">Insert Images</span></label>
<!-- 下面为了避免中文，由上面替换 -->
<!-- <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);"> -->
<input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple onchange="javascript:setImagePreview();">
<br />
<div id="showImg" class="showImg"></div>
</div>
<script type="text/javascript">
function setImagePreview() {
var imghtml = imgUrls();
if (imghtml === '111') {
window.alert('Notice', 'You can upload up to three photos');
return false;
}
$('#showImg').html(imghtml);
}
// 限制传递图片的张数
function imgUrls() {
var imgsrcs = getUrl();
var imghtml = '';
var len = imgsrcs.length;
if (len > 3) {
return '111';
}
for (var i = 0; i < len; i++) {
imghtml += '<img src=' + imgsrcs[i] + ' alt="you have selected"> ';
}
return imghtml;
} function getUrl() {
var obj = $('#imgfile')[0].files;
var len = obj.length;
var imgsrcs = [];
for (var i = 0; i < len; i++) {
imgsrcs[i] = getObjectURL(obj[i]);
}
//添加图片路径到img src中进行预览
//不同浏览器下的路径不同
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
} return imgsrcs;
}
</script>
</body></html>
