直接上代码了,,简单粗暴点。
首先大家需要知道,
accept 属性只能与<input type="file">
配合使用。它规定能够通过文件上传进行提交的文件类型。
如果不限制图像的格式,可以写为:accept="image/*
"
html代码
<input type="file" id="file" name="file" accept="image/* οnchange="imgPreview(this)" /><div id="imgBox"></div>
js代码
<script type="text/javascript">
function imgPreview(preview) {
// 获取目前上传的文件
var file = preview.files[0];
console.log(file);
// 设置上传图片的大小
if (file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
// 获取 window 的 URL
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
// 用这个 URL 产生一个 <img> 将其显示出来
var img = document.createElement("img");
img.src = imgURL;
img.width = 75;
img.height = 50;
img.style.display = 'block';
img.style.float = "left";
img.style.marginRight = '5px';
document.getElementById("imgBox").appendChild(img);
document.getElementById("file").value = "";
}
</script>
第二种方法 利用html5的FileReader()读取文件,html代码不变
<script type="text/javascript">
function imgPreview(preview) {
// 获取目前上传的文件
var file = preview.files[0];
// 设置上传图片的大小
if (file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
if (window.FileReader) {
//通过FileReader构造函数实例化对象
var fr = new FileReader();
fr.onloadend = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
img.width = 75;
img.height = 50;
img.style.display = 'block';
img.style.float = "left";
img.style.marginRight = '5px';
document.getElementById("imgBox").appendChild(img);
};
fr.readAsDataURL(file);
}
//FileReader实践中的的一个问题,如果不清空的话上传文件的话如果是相同的文件无法调用 fr.onloadend
document.getElementById("file").value = "";
}
</script>