JS实现添加相册图片
2018-08-15 本文已影响0人
请叫我果爸
现在评价除了写一些内容之外，还会进行一些星级评价，上传照片等。
我拿着网上的一些代码，并进行了一些修改，有需要的朋友可以参考一下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>测试页面</title>
<script type="text/javascript">
window.onload = function(){
docObj = document.getElementById("doc");
}
var docObj;
var FileCount=0;//上传文件总数
//下面用于图片上传预览功能
function setImagePreviews() {
var dd = document.getElementById("dd");
var fileList = docObj.files;
var imgObjPreview = document.getElementById("img"+FileCount);
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc)
var localImagId = document.getElementById("img" + FileCount);
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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();
}
FileCount++;
if (FileCount < 5) {
dd.innerHTML+="<div style='width:150px;height:180px;float:left;text-align:center;' > <img id='img" + FileCount + "' onclick='javascript:openPhoto()' src='tianjia.jpg' /> </div>";
};
return true;
}
function openPhoto() {
docObj.click();
}
</script>
</head>
<body>
<div style="margin :0px auto; width:990px;">
<div id="dd" style="width:100%;">
<div style='width:150px;height:180px;float:left;text-align:center;' > <img id='img0' onclick='javascript:openPhoto()' src='tianjia.jpg'/> </div>
</div>
</div>
<input type="file" name="file" id="doc" style="visibility: hidden;" onchange="javascript:setImagePreviews();" accept="image/*" />
</body>
</html>
