

画像１と画像２の２つ画像入力フォームがあり、それぞれ選択した画像をプレビュー表示するようにしたいのですが、画像選択すると画像１と画像2のどちらにも同じ画像がプレビュー表示されてしまいます。

画像1(userfile1)と画像2(userfile2)、それぞれ選択した画像がプレビュー表示されるようにするには、どうすれば良いのでしょうか。教えていただけますか。

jQueryの部分

[code]

    $(function() {
      $('input[type=file]').after('<span></span>');
    
      // アップロードするファイルを選択
      $('input[type=file]').change(function() {
        var file = $(this).prop('files')[0];
    
        // 画像以外は処理を停止
        if (! file.type.match('image.*')) {
          // クリア
          $(this).val('');
          $('span').html('');
          return;
        }
    
        // 画像表示
        var reader = new FileReader();
        reader.onload = function() {
          var img_src = $('<img>').attr('src', reader.result);
          $('span').html(img_src);
        }
        reader.readAsDataURL(file);
      });
    });
    
[/code]

フォームの部分

[code]

    <form enctype="multipart/form-data" method="post">
    <input type="file" name="userfile1" accept="image/*">
    <input type="file" name="userfile2" accept="image/*">
    </form>
    
[/code]


CC BY-SA 3.0
2016-05-09T14:34:35.750
24678
2016-09-26T03:32:29.623
2016-05-09T17:27:17.063
15312
15312
question
jquery
jQuery 画像アップロード画面で選択した画像をプレビュー表示させたい


以下のコードが、すべてのspan要素に対する処理となっているため問題が発生しています。

[code]

    $('span').html(img_src);
    
[/code]

提示されたコードにあまり手を加えない方向性で考えると、  
選択されたinput要素の次にあるspan要素のみを表示対象にするとよいのではないでしょうか。

[code]

    $(function() {
      $('input[type=file]').after('<span></span>');
    
      // アップロードするファイルを選択
      $('input[type=file]').change(function(e) {
        var file = $(this).prop('files')[0];
    
        // 画像以外は処理を停止
        if (! file.type.match('image.*')) {
          // クリア
          $(this).val('');
          $('span').html('');
          return;
        }
    
        // 画像表示
        var reader = new FileReader();
        reader.onload = function() {
          var img_src = $('<img>').attr('src', reader.result);
          $(e.target).next().html(img_src);
        }
        reader.readAsDataURL(file);
      });
    });
    
[/code]


CC BY-SA 3.0
2016-05-10T04:49:38.317
24701
2016-05-10T04:49:38.317
13314
24678
answer