Скрипт для загрузки предварительного просмотра работать

Question

это не распространяется

создать скрипт для показа изображения до загрузки, как я использую 5 файлы ввод для загрузки, сценарий должен позволить показать одно изображение или изображение предварительного просмотра для каждого входного файла

Сценарий:

<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> 

ВЫЗОВ SCRIPT для этого входа FILE ID

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

Как вы можете видеть, я пытаюсь отправить ВАР из handleFileSelect ('', '2'), но не don't работы никогда и я думаю, что код it' ю хорошо, но уверен, что я что-то забыл, я надеюсь, что здесь может помочь мне в этом вопросе, thank's сообщества

наилучшими пожеланиями

Answer 1

Попробуйте этот код

$(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>

Answer 2

Это лучше, если вы используете CreateObjectURL вместо (экономит больше памяти/процессора) это также 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>