Выберите и покажите изображения с помощью FileReader

Question

Вот моя проблема, у меня есть этот маленький код для отображения img, который я загружаю LIVE без перезагрузки, но он работает только с одним img, потому что readURL(input) не имеет класса и работает непосредственно из noname-input, а когда я добавляю класс readURL(input.joint), он заносит ошибку! Вот мой код:

<input class="joint" type='file' id="imgInp" /> 
    <img style="width:45px" id="blah" src="#" alt="your image" /> 


<script type="text/javascript"> 
function readURL(input) { 

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

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

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

$("#imgInp").change(function(){ 
    readURL(this); 
}); 
</script> 

Мне нужно добавить некоторый идентификатор или класс в эту функцию jquery, чтобы сделать его уникальным для каждого входа.

Что я пытаюсь сделать:

<input class="joint" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.joint) { 

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

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

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

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 


<input class="file2" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.file2) { 

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

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

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

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 

Answer 1

У вас есть повторяющиеся идентификаторы во всем (imgInp и blah), поэтому селектор будет выбирать только первый, в конце концов, ваше событие связано только первое поле ввода и выбор $('#blah'). Вам нужно выбрать относительное изображение относительно ввода. Вам также не нужно дублировать сценарий. Выберите следующий тег изображения по отношению к входу, как $(input).next('img').attr('src', e.target.result);

Так попробуйте:

function readURL(input) { 

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

     reader.onload = function (e) { 
      $(input).next('img').attr('src', e.target.result); 
     } 

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


$(function(){ 
    $(".upld").change(function() { //set up a common class 
     readURL(this); 
    }); 
}); 

Fiddle

Answer 2

Ваш код работает правильно для меня, когда я исправить опечатку:

if (input.filers && input.files[0]) { 
      ^^^^^^ 
if (input.files && input.files[0]) { 

Вот пример: http://jsfiddle.net/s6ttw/

Update:

Если yo Вы хотите, чтобы он работал так, как вы ожидаете, что вам нужно использовать классы, а не идентификаторы.

Вот лучший пример того, что вы просите: http://jsfiddle.net/s6ttw/1/

Answer 3

Хорошо, тот факт, что вы пытаетесь добавить класс аргумента функции с точкой нотация показывает, что вам нужно больше узнать о работе Javascript, чем можно объяснить в простом ответе StackOverflow, но позвольте мне попробовать:

• input в readURL(input) - это имя аргумента, похожее на имя переменной, поэтому вы не можете его расширять. Это ссылка на то, что вы передаете, когда вы вызываете readURL, в этом случае, если вы посмотрите на конец своего кода, это ссылка на this. this относится к элементам, на которые ссылается селектор jQuery, в котором вы проходили: "#imgInp". не

Итак, если вы хотите использовать .joint класс вместо этого, просто передать, что в качестве селектора JQuery:

$(".joint").change(function(){ 
    readURL(this); 
}); 

• Однако, если у вас есть несколько .joint элементов, ваша readURL функция будет не более длинная работа, потому что в настоящее время она предназначена только для изменения src#blah. Что вам нужно сделать, это изменить src каждого элемента, соответствующего img.

Так что, если вы имели некоторые HTML вроде этого:

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

Вы можете разместить свой readURL функцию после того, как все элементы и изменить раздел reader.onload следующим образом:

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

     reader.onload = function (e) { 
      $(input).next('.joint-img').attr('src', e.target.result); 
     } 

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

$(".joint").change(function(){ 
    readURL(this); 
});