腳本負載圖像預覽doesn't工作

我作秀圖像上傳之前創建的腳本，我如何使用上傳5個輸入文件，腳本必須讓顯示一個圖像，或者爲每個輸入文件腳本負載圖像預覽doesn't工作

預覽圖像該腳本：

<script> 
function handleFileSelect(evt,ids) { 
    var files = evt.target.files; 
    var f = files[0]; 
    var reader = new FileReader(); 

    reader.onload = (function(theFile) { 
    return function(e) { 
     document.getElementById('list'+ids).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join(''); 
     ///alert("ok"+ids); 
    }; 
    })(f); 

    reader.readAsDataURL(f); 
} 
</script>

HTML代碼

<input type="file" id="files2" /> 
<output id="list2"></output>

調用腳本此輸入文件ID

<script> 
document.getElementById('files2').addEventListener('change', function(){handleFileSelect('','2');},false); 
</script>

正如你可以看到我試着從handleFileSelect發送瓦爾（「」，「2」），但從來沒有鴕鳥政策的作品，我想代碼it'一報還一，但相信我忘了什麼東西，我希望這裏能幫助我在這個問題上，thank's社區

的問候

來源

2016-12-20 Jose

試試這個代碼

$(function() { 
 
    var _URL = window.URL || window.webkitURL; 
 
    $(".UploadImage").on("change", function() { 
 
    \t var preview = $(this).attr("data-img"); 
 
    \t var file, img; 
 
    if ((file = this.files[0])) { 
 
    \t img = new Image(); 
 
     img.onload = function() { 
 
     \t document.getElementById(preview).src = _URL.createObjectURL(file); 
 
     }; 
 
     img.src = _URL.createObjectURL(file); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<input type="file" data-img="preview1" class="UploadImage" /> 
 
<img src="" id="preview1"/> 
 
</div> 
 

 
<div> 
 
<input type="file" data-img="preview2" class="UploadImage" /> 
 
<img src="" id="preview2"/> 
 
</div> 
 

 
<div> 
 
<input type="file" data-img="preview3" class="UploadImage" /> 
 
<img src="" id="preview3"/> 
 
</div> 
 

 
<div> 
 
<input type="file" data-img="preview4" class="UploadImage" /> 
 
<img src="" id="preview4"/> 
 
</div>

來源

2016-12-20 15:25:37 Jigarb1992

它的更好，如果你使用CreateObjectURL代替（節省更多的內存/ CPU），它也是faster

var wrapper = document.getElementById('files') 
 
var URL = window.URL || window.webkitURL; 
 

 
wrapper.addEventListener('change', function(evt){ 
 
    var input = evt.target 
 
    
 
    if (input.matches('input[type="file"]') && (input.files || [])[0]) { 
 
    var img = new Image 
 
    img.width = 50 
 
    img.onload = function() { 
 
     var output = document.getElementById(input.dataset.for) 
 
     output.appendChild(this) 
 
    } 
 
    img.onerror = function(){ 
 
     console.log("You uploaded something that is not an image") 
 
    } 
 
    img.src = URL.createObjectURL(input.files[0]) 
 
    } 
 
})

output { 
 
    display: block; 
 
}

<div id="files"> 
 
    
 
    <!-- Recomend adding accept attribute so you only get images --> 
 
    <!-- just made one example --> 
 
    <input type="file" data-for="list1" accept="image/*"> 
 
    <output id="list1"></output> 
 

 
    <input type="file" data-for="list2"> 
 
    <output id="list2"></output> 
 

 
    <input type="file" data-for="list3"> 
 
    <output id="list3"></output> 
 

 
    <input type="file" data-for="list4"> 
 
    <output id="list4"></output> 
 

 
</div>

來源

2016-12-20 23:26:43 Endless

腳本負載圖像預覽doesn't工作

回答

相關問題