input file 多张图片上传预览

zhushao

273106899

发布于
2017-02-15

<input type="file" multiple />
实现多张图片上传前的本地预览
这个有插件嘛？或是怎样的方法思路？

html javascript

阅读 17.1k

3 个回答

得票最新

谢远东

4.5k21628

发布于
2017-02-15

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>多图预览</title>
</head>
<script>  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
  
function readAsDataURL(){  

    var file = document.getElementById("file").files;
    var result=document.getElementById("result");  

    for(i = 0; i< file.length; i ++) {
        var reader    = new FileReader();    
        reader.readAsDataURL(file[i]);  
        reader.onload=function(e){  
            //多图预览
            result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';  
        }

    }
    
}  
  
</script>  
<p>  
    <label>请选择一个文件：</label>  
    <input type="file" id="file" multiple="multiple" />  
    <input type="button" value="读取图像" onclick="readAsDataURL()" />   
</p>  
<div id="result" name="result"></div>