Использование JQuery для просмотра файла перед загрузкой

Question

Я хочу показать фото выбрать с помощью диалогового окна ввода файла, но этот код не выполнять и не выводит сообщение об ошибке:

var Box = $('.UploadBox'); 
var Image = $('.Image'); 
var Input = $('.UloadBox .File'); 
Box.hide() 
$('.Photo .Upload').click(function() { 
    Box.show(); 
    Input.change(function() { 
     var File = this.files[0]; 
     var Reader = new FileReader(); 
     Reader.onload = function (e) { 
      Image.attr('src', e.target.result); 
     }; 
     Reader.readAsDataURL(this.files[0]); 
    }); 
}); 

Answer 1

Это решение, которое я использую. Он обрабатывает загрузку нескольких изображений. Если вы хотите предоставить возможность загружать только одно изображение за раз, вы можете просто изменить HTML для элемента ввода. Для любого из этих входов предоставленный javascript запуск приводит к тому же исполнению. Затем становится вопросом, что вы ограничиваете загрузку файла одним или несколькими файлами.

Для нескольких файлов: <input type="file" id="files" name="files[]" multiple />
Для одного файла: <input type="file" id="files" name="file" />

var numDocuments = 0; 
 
var numDocumentsProcessed = 0; 
 

 
function processFiles() { 
 
    numDocuments = files.length; 
 
    for (var i = 0, f; f = files[i]; i++) { 
 
    var fileReader = new FileReader(); 
 
    fileReader.onloadend = (function (file) { 
 
     return function (evt) { 
 
     doSomethingWithFile(evt, file) 
 
     } 
 
    })(f); 
 
    fileReader.readAsDataURL(f); 
 
    } 
 
} 
 

 
function onFilesSelected(event) { 
 
    files = event.target.files; // FileList object 
 
    processFiles(); 
 
} 
 

 
function doSomethingWithFile(evt, file) { 
 
    var key = file.name; 
 
    var value = evt.target.result; 
 
    var container = document.getElementById('image-container'); 
 
    var image = document.createElement('img'); 
 
    image.src = evt.target.result; 
 
    container.appendChild(image); 
 
    if (++numDocumentsProcessed === numDocuments) { 
 
    //final steps after final image processed 
 
    } 
 
} 
 

 
document.getElementById('files').addEventListener('change', onFilesSelected, false);

<input type="file" id="files" name="files[]" multiple /> 
 
<br> 
 
<div id="image-container"></div>