js 实现图片上传前预览

  • 内容
  • 评论
  • 相关

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="" alt="" id="Cimg" style="width:200px;height:200px;border-radius:200px;border:1px solid red;"/>
<input type="file" id="fi" onchange="imagePreview(this)" />
<script type="text/javascript">
function imagePreview(input){
var files = input.files;
// 假设 "preview" 是将要展示图片的 div
var preview = input.parentNode;
for (var i = 0; i < files.length; i++) {//预览新添加的图片
var file = files[i];
var imageType = /^image\//;
if ( !imageType.test(file.type) ) {
alert("请选择图片类型上传");
continue;
}
var img = document.getElementById("Cimg")
img.classList.add("obj");
img.file = file;
img.style.width = "100px";
preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
</script>

</script>
</body>
</html>

评论

1条评论

发表评论

电子邮件地址不会被公开。