原生JS实现图片预览

经测试兼容chrome、opera、firefox、IE。使用的HTML5的FileReader API实现。

FileReader实现图片预览

HTML 代码

1
2

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

JS 代码

1
2
3
4
5
6
7
8
9
10

function showPreview(source) {
     var file = source.files[0];
     if(window.FileReader) {
         var fr = new FileReader();
         fr.onloadend = function(e) {
             document.getElementById("portrait").src = e.target.result;
         };
         fr.readAsDataURL(file);
     }
}

判断图片格式

如果有判断图片格式的需求，可以写正则表达式来验证file.type。

1
2
3
4

if(!/image\/\w+/.test(file.type)){
    alert("请确保文件为图像类型");
    return false;
}

判断图片大小

请注意 1000000 ≈ 1M 。

1
2
3
4

if(file.size > 1000000){
    alert('图片过大！');
    return false;
}

• ← 上一篇
• 下一篇 →