質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

17622閲覧

javascript:アップロード前のサムネイル表示をした後、任意の画像を削除したいです。

blueBird

総合スコア25

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/07/11 05:35

編集2015/07/12 04:35

【やりたいこと】
PHP で複数あげられる画像アップローダーを作っています。
サブミットボタンを押下しformタグのactionが実行される前にサムネイルを表示します。
(ここまではできている)
たとえば、A,B,Cの画像を選択しサムネイルを表示します。そこで削除ボタンなどを設けてBだけを削除して、アップロードをするのをAとCだけにするといった内容です。

【現状と問題】
下記のソースの通り、削除ボタンを押すと
$("input[type='file']").val(null);により全部消えてしまいますがこれを上手く任意の画像を削除するソースの記述の仕方、考えが浮かびません。どうしたら良いでしょうか。

javascript初心者です。お力を貸してください。

lang

1 2<form action="upload" method="post" enctype="multipart/form-data"> 3 <input id="files" type="file" name="upfile[]" size="30" multiple accept="image/jpeg," /> 4 <input type="submit"value="アップロード" /> 5</form> 6<div id="file_list"></div>

lang

1 2<script> 3 $(function() { 4 var init = function() { 5 // 選択後イベント 6 $('input[name="upfile[]"]').change(function(evt) { 7 $('div#file_list').text(''); 8 9 jQuery.each(evt.target.files, function(i) { 10 // サムネイル画像生成 11 var reader = new FileReader(); 12 reader.readAsDataURL($(this)[0]); 13 // ファイル名表示 14 15 reader.onloadend=function(i){ 16 $('div#file_list') 17 .append($('<img width="150px" height="100px" style="margin: 2px"/>'). 18attr('src', this.result),file_name+'<button onClick ="deleteThumbnail()">削除'); 19 }; 20 var file_name = ($(this)[0].name); 21 22 23 var files = document.getElementById("files").files[i]; 24 console.log(files); 25 26 }); 27 }); 28 } 29 init(); 30 }); 31 32 function deleteThumbnail(){ 33 //サムネイル非表示 34 $('div#file_list').remove(); 35 36 // input[]に上がったのを削除 37 $("input[type='file']").val(null); 38 } 39 40</script> 41

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

input[type="file"]の値の変更はセキュリティ上の問題とかでnullにする以外は認められていなかったかと思います。
つまり1つのinput[type="file"]で複数画像を選択させる場合、ファイル選択無しにする以外はjsで操作することができません。特定の1つを削除ができない訳です。
ですので、

  1. 複数選択ではなく、1inputタグ1ファイルとし、画像選択時に新しいinput[type="file"]を作成し、画像削除時に該当するinput[type="file"]を削除させるのが良いかと思います。

あるいは、
2. 複数選択のままにしておき、アップロードするファイルのIDなどをリストに保持させて、画像削除時にリストから削除しフォームデータ送信時にそのリストを元に対象外のファイルを弾いてajaxで送信するとかでしょうか。

1. 新しいinputタグを追加するパターン

html

1<form action="upload" method="post" enctype="multipart/form-data"> 2 <ul id="file_list"> 3 <li class="js-file"> 4 <input class="js-inputFile" type="file" name="upfile[]" size="30" accept="image/jpeg" /> 5 </li> 6 </ul> 7 <input id="submitBtn" type="submit" value="アップロード" /> 8</form>

javascript

1$(function() { 2 var init = function() { 3 // idはhtmlに1つなので $(#id名) とした方が高速 4 var $fileList = $('#file_list'); 5 6 $fileList 7 // ファイル削除イベント 8 .on('click.deleteFile', '.js-deleteBtn', function(evt) { 9 var $li = $(this).closest('.js-file'); 10 // input[type="file"]が1つ以上の場合は該当のinpuタグを削除する 11 if($fileList.find('.js-file').length > 1) { 12 $li.remove(); 13 } else { 14 $li.find('.js-thumb').remove(); 15 } 16 return false; 17 }) 18 // ファイル選択時のイベント 19 .on('change.inputFile', '.js-inputFile', function(evt) { 20 var $input = $(this), 21 fileID = $input.data('fid'), 22 $li = $input.closest('.js-file'), 23 $newLi; 24 25 if(evt.target.files.length) { 26 $newLi = $li.clone(); 27 $newLi.find('.js-inputFile').val(null); 28 // 新しくinputタグを追加する 29 $fileList.append($newLi); 30 31 $.each(evt.target.files, function(i, elm) { 32 var file = this, 33 fileName = file.name, 34 reader; 35 36 // サムネイル画像生成 37 reader = new FileReader(); 38 reader.readAsDataURL(file); 39 40 // サムネイルを表示させる処理 41 reader.onloadend = function(evt) { 42 var fileReader = this; 43 if(fileReader.result) { 44 var thumb = '<div class="js-thumb"><img src="' + fileReader.result + '" width="150px" height="150px" style="max-width:100%;height:auto;">' + fileName + '<button class="js-deleteBtn">削除</button></div>'; 45 $li.append(thumb); 46 } 47 return this; 48 }; 49 }); 50 $input.hide(); 51 } else { 52 // ファイルが選択がキャンセルされた時 既にサムネイルが表示されてるなら削除する 53 $li.find('.js-deleteBtn').trigger('click'); 54 } 55 return this; 56 }); 57 }; 58 init(); 59});

2. フォームデータ送信時に対象外のファイルを弾くパターン

html

1<form id="myForm" action="upload" method="post" enctype="multipart/form-data"> 2 <input id="js-inputFile" type="file" name="upfile[]" size="30" multiple accept="image/jpeg" /> 3 <input id="submitBtn" type="button" value="アップロード" /> 4</form> 5<ul id="file_list"></ul>

javascript

1$(function() { 2var init = function() { 3 var $form = $('#myForm'), 4 $fileList = $('#file_list'), 5 filesObj; 6 7 // サムネイル削除時 8 $fileList.on('click.deleteFile', '.js-deleteBtn', function(evt) { 9 var $li = $(this).closest('.js-thumb'), 10 fileID = $li.data('img-id'); 11 $li.remove(); 12 // ファイルリストから削除 13 delete filesObj[fileID]; 14 return false; 15 }); 16 17 $form 18 // ファイル選択時 19 .on('change.selectFiles', '#js-inputFile', function(evt) { 20 // ファイルリスト・ファイルリストを初期化 21 $fileList.html(''); 22 filesObj = {}; 23 jQuery.each(evt.target.files, function(i, elm) { 24 var file = this, 25 fileName = file.name, 26 fileIndex = i, 27 reader; 28 // ファイルリストに追加 29 filesObj[i] = file.name; 30 31 // サムネイル画像生成 32 reader = new FileReader(); 33 reader.readAsDataURL(file); 34 35 // サムネイルを表示させる処理 36 reader.onloadend = function(evt) { 37 var fileReader = this; 38 if(fileReader.result) { 39 var html = '<li class="js-thumb" data-img-id="' + fileIndex + '"><img src="' + fileReader.result + '" width="150px" height="150px" style="max-width:100%; height: auto;">' + fileName + '<button class="js-deleteBtn">削除</button></li>'; 40 $fileList.append(html); 41 } 42 return this; 43 }; 44 return this; 45 }); 46 }) 47 // フォーム送信時の処理 48 .on('click.formSubmit', '#submitBtn', function(evt) { 49 var formData = new FormData(), 50 files = $('#js-inputFile').prop("files"); 51 52 for(var i=0, l=files.length; i<l; i+=1) { 53 // 削除されていないファイルだけを送信するように整形 54 if( filesObj[i] ) { 55 formData.append("upfile[]", files[i]); 56 } 57 } 58 // その他のデータもある場合は formData に追加する 59 60 $.ajax({ 61 url: 'API_URL フォーム送信先のURL ', 62 method: 'post', 63 dataType: 'json', 64 data: formData, 65 processData: false, 66 contentType: false, 67 }) 68 .done(function( res ) { 69 console.log('送信成功', res); 70 }) 71 .fail(function(jqXHR, textStatus, errorThrown) { 72 console.log('送信失敗', jqXHR, textStatus, errorThrown); 73 }); 74 return false; 75 }); 76 }; 77 init(); 78});

手前味噌で恐縮ですが、ファイルをAjaxで送信するのはコチラを参照下さい。
jQuery Ajaxでファイルを送りたい! - かもメモ
※ ちょっと古い記事なので今ならもっとモダンな方法があるかもしれませんが...

投稿2015/07/17 05:05

KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問