質問: $('').attr('src', reader.result); $('span').html(img_src); } reader.readAsDataURL(file); }); }); ``` フォームの部分 ``` ```
回答: 以下のコードが、すべてのspan要素に対する処理となっているため問題が発生しています。 ``` $('span').html(img_src); ``` 提示されたコードにあまり手を加えない方向性で考えると、 選択されたinput要素の次にあるspan要素のみを表示対象にするとよいのではないでしょうか。 ``` $(function() { $('input[type=file]').after(''); // アップロードするファイルを選択 $('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 = $('').attr('src', reader.result); $(e.target).next().html(img_src); } reader.readAsDataURL(file); }); }); ```