Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
jQueryを使ってファイルのアップロードができるようにしたいです。
1つだけだったら、できたのですが、ソース上に設置した「追加」のボタンを押し、ファイルをアップロードするinputタグを複数設置するとうまくいきません。
■出来たこと
まず最初にファイルをアップロードするinputタグをHTML上に直書きし
・アップロードしようとしたファイルのバイト数を取得し、if文にて5m以上のファイルと5m以下のファイル容量を判断
・ファイルの容量が5m以上ならダイアログを表示し5m以上のファイルなので、
5m以下のファイルを上げてくださいと注釈が出るようにする。
・アップロードしようとしたファイルのファイル名、容量、種類を表示
・「追加」ボタンを押すことで上記と同じ事ができるタグを追加
■出来なくて困っていること
・ページを表示した時に最初に表示されている「ファイルを選択」ボタンをクリックすると上記で書いた動作はするが、
「追加」ボタンを押して表示された「ファイルを選択」ボタンでは5m以上のファイルを選択してもダイアログが反応しない
・ページを表示した時に最初に表示されている「ファイルを選択」ボタンを再度
・「追加」ボタンを何回か押して、ページを表示した時に最初に表示されている「ファイルを選択」ボタンをクリックし
ファイルを選択すると全ての「ファイルを選択」ボタンに同じファイルの内容が表示される
■最終的にやりたいこと
・ファイルをアップロードしてもらう時に複数枚のファイルをアップロードできるようにしたい
・「ファイルを選択」ボタンをクリックしてアップロードできるファイルの容量の上限は１つにつき5m
・アップロードするファイルが5m以上の時ダイアログを表示し、
「アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。」
という内容を表示したい
・「追加」ボタンを押すことで任意に「ファイルを選択」するボタンを増やしたい
###該当のソースコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');} //最初にHTML上に表示されているフォームボタンに対して発動 $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>'); }); //ファイルのアップロード $(function() { var FileUpNo = '1'; //追加ボタンを押したら $('#Plus').on('click',function(){ FileUpNo++; //inputのname属性をナチュラルにするために1を加算し番号を振る //追加ボタンの上にファイルアップロード用のinputとファイルサイズなどを表示するためのタグを挿入 $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><br><sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>'); }); // $('input[type=file]').on('click',function(){ $(this).after().change(function() { var file = $(this).prop('files')[0]; $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type); }); }); //$('input[type=file]').after(''); }); //以下はファイルサイズのチェック用 function getFiseSize(file_size){ var str; var unit = ['byte', 'KB', 'MB', 'GB', 'TB']; for (var i = 0; i < unit.length; i++) { if (file_size < 1024 || i == unit.length - 1) { if (i == 0) { // カンマ付与 var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); str = integer + unit[i]; } else { // 小数点第2位は切り捨て file_size = Math.floor(file_size * 100) / 100; // 整数と小数に分割 var num = file_size.toString().split('.'); // カンマ付与 var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); if (num[1]) { file_size = integer + '.' + num[1]; } str = file_size + unit[i]; } break; } file_size = file_size / 1024; //alert(file_size); if (i == 'KB') { }else if(i == 'byte'){ } else if(file_size > 5120){ alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。"); } } return str; } </script> </head> <body> <div align="center"> <table width="950"> <tbody> <tr> <td colspan="4"> <form action="" method="post" enctype="multipart/form-data"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="53" colspan="2"><table width="100%" border="0" cellpadding="7" cellspacing="0" class="unnamed4"> <tbody> <tr> <td class="Class30" bgcolor="#FFFFFF"><input type="file" name="clip-1" size="50"> <br> <button id="Plus" type="button">追加</button> <br> <br> <span style="color:#f00;margin: 0 0 10px 0;display: block;">アップロードするファイルのサイズが5MBをこえないサイズでお願い致します。</span></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </form> </td> </tr> </tbody> </table> </div> </body> </html>
何卒宜しくお願い致します。
補足願います。『複数設置しようとするとうまくいきません』とありますが、ご提示のコードには追加ボタンが一つしかないように見えます。これが動かないコードで間違いないですか？
kei344さん、Lhankor_Mhy さん、お返事が遅くなり申し訳ありません。
内容を修正致しました。
宜しくお願い致します。
回答3件
0
kei344さんから頂いた
$( 'body' ).on( 'click', 'input[type=file]', function() { /* 省略 */ } );
を使用し、
$('input[type=file]').on('click',function(){ $(this).after().change(function() { var file = $(this).prop('files')[0]; $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type); }); });
を
$( 'body' ).on( 'click', 'input[type=file]', function(e){ console.log('input[type=file]'); $(this).after().change(function() { var file = $(this).after().prop('files')[0]; $(this).next('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type); });
にしました。
下記完成したコードになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');} //最初にHTML上に表示されているフォームボタンに対して発動 $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>'); }); //ファイルのアップロードボタン設置 $(function() { var FileUpNo = '1'; //追加ボタンを押したら $('#Plus').on('click',function(){ FileUpNo++; //inputのname属性をナチュラルにするために1を加算し番号を振る //追加ボタンの上にファイルアップロード用のinputとファイルサイズなどを表示するためのタグを挿入 $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>'); }); // $( 'body' ).on( 'click', 'input[type=file]', function(e){ console.log('input[type=file]'); $(this).after().change(function() { var file = $(this).after().prop('files')[0]; $(this).next('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type); }); }); $('input[type=file]').after(''); }); //以下はファイルサイズのチェック用 function getFiseSize(file_size){ var str; var unit = ['byte', 'KB', 'MB', 'GB', 'TB']; for (var i = 0; i < unit.length; i++) { if (file_size < 1024 || i == unit.length - 1) { if (i == 0) { // カンマ付与 var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); str = integer + unit[i]; } else { // 小数点第2位は切り捨て file_size = Math.floor(file_size * 100) / 100; // 整数と小数に分割 var num = file_size.toString().split('.'); // カンマ付与 var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); if (num[1]) { file_size = integer + '.' + num[1]; } str = file_size + unit[i]; } break; } file_size = file_size / 1024; //alert(file_size); if (i == 'KB') { }else if(i == 'byte'){ } else if(file_size > 5120){ alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。"); } } return str; } </script> </head> <body> <div align="center"> <table width="950"> <tbody> <tr> <td colspan="4"> <form action="" method="post" enctype="multipart/form-data"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="53" colspan="2"><table width="100%" border="0" cellpadding="7" cellspacing="0" class="unnamed4"> <tbody> <tr> <td class="Class30" bgcolor="#FFFFFF"><input type="file" name="clip-1" size="50"> <br> <button id="Plus" type="button">追加</button> <br> <br> <span style="color:#f00;margin: 0 0 10px 0;display: block;">アップロードするファイルのサイズが5MBをこえないサイズでお願い致します。</span></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </form> </td> </tr> </tbody> </table> </div> </body> </html>
投稿2016/12/14 05:03
編集2016/12/14 05:41総合スコア55
0
ベストアンサー
JavaScript
1$( 'body' ).on( 'click', 'input[type=file]', function() { /* 省略 */ } );
投稿2016/12/13 13:30
総合スコア69398
ご回答ありがとうございます。
すいません、頂いたご回答の
$( 'body' ).on( 'click', 'input[type=file]', function() { /* 省略 */ } );
はどこに入れれば良いのでしょうか？
また、/* 省略 */の部分は何が省略されているのでしょうか。
コードがある程度ありますので、どの部分に当てはめれば良いのか分かり兼ねております。
申し訳ありませんが、ご教授お願い致します。
頂いた内容で全て解決したわけではないのですが、kei344さんに頂いた内容でかなり前に進めましたので、ベストアンサーに選ばさせて頂きました。
ありがとうございました。
0
jQuery なら複数ファイルアップロードを行うためのプラグインがありますから、そちらを使う方が楽だと思います。
例えばこれとか。
投稿2016/12/13 00:30
総合スコア13703
ご回答ありがとうございます。
参考にさせて頂きます。
ただ、今回はこちらの都合で現状のソースを使用しないといけないため、ソースを編集して、何とかしたいと思っています。
あなたの回答
tips
プレビュー
