Как создать загрузчик изображений с предварительным просмотром

Question

Я хочу иметь форму с несколькими частями.

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

Вторая часть имеет различные поля текстовой формы.

У меня есть вторая часть, построенная отлично и работает, используя PHP и MySQL, и загрузка изображений тоже работает. Но я не знаю, как показать предварительный просмотр изображений перед отправкой формы.

EDIT:

используя код формы ответа:

 <input type='file' onchange="readURL(this);" /> 
    <img id="blah" src="#" alt="your image" /> 

с:

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah') 
        .attr('src', e.target.result) 
        .width(150) 
        .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

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

Пытаюсь:

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      var container = $('#previews'); 
      var image = $('<img>').attr('src', e.target.result).width(150); 
      image.appendTo(container); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

с:

<input type='file' name="files[]" onchange="readURL(this);" multiple /> 
    <div id="previews"></div> 

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

Answer 1

Взгляните, что:

http://jsbin.com/uboqu3/1/edit

из этого поста на StackOverflow: Preview an image before it is uploaded

Lucian

Answer 2

Вы не можете показать превью до того, изображение на сервере, за исключением того, если вы используете Java на интерфейсе

Answer 3

Вы можете сделать это USIN г HTML5 холст и FileReader компонент

Посмотрите js fiddle here