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

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

ただいまの
回答率

89.20%

ファイルをアップロードするボタンを複数設置して、ファイル容量に対してダイヤログを出したいです。宜しくお願いします。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,134

kusaka00

score 52

jQueryを使ってファイルのアップロードができるようにしたいです。
1つだけだったら、できたのですが、ソース上に設置した「追加」のボタンを押し、ファイルをアップロードするinputタグを複数設置するとうまくいきません。

■出来たこと
まず最初にファイルをアップロードするinputタグをHTML上に直書きし
・アップロードしようとしたファイルのバイト数を取得し、if文にて5m以上のファイルと5m以下のファイル容量を判断
・ファイルの容量が5m以上ならダイアログを表示し5m以上のファイルなので、
5m以下のファイルを上げてくださいと注釈が出るようにする。
・アップロードしようとしたファイルのファイル名、容量、種類を表示
・「追加」ボタンを押すことで上記と同じ事ができるタグを追加

■出来なくて困っていること
・ページを表示した時に最初に表示されている「ファイルを選択」ボタンをクリックすると上記で書いた動作はするが、
「追加」ボタンを押して表示された「ファイルを選択」ボタンでは5m以上のファイルを選択してもダイアログが反応しない
・ページを表示した時に最初に表示されている「ファイルを選択」ボタンを再度
・「追加」ボタンを何回か押して、ページを表示した時に最初に表示されている「ファイルを選択」ボタンをクリックし
ファイルを選択すると全ての「ファイルを選択」ボタンに同じファイルの内容が表示される

■最終的にやりたいこと
・ファイルをアップロードしてもらう時に複数枚のファイルをアップロードできるようにしたい
・「ファイルを選択」ボタンをクリックしてアップロードできるファイルの容量の上限は1つにつき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>

何卒宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/12/13 11:41

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • Lhankor_Mhy

    2016/12/13 14:54

    補足願います。『複数設置しようとするとうまくいきません』とありますが、ご提示のコードには追加ボタンが一つしかないように見えます。これが動かないコードで間違いないですか?

    キャンセル

  • kusaka00

    2016/12/13 21:31 編集

    kei344さん、Lhankor_Mhy さん、お返事が遅くなり申し訳ありません。
    内容を修正致しました。
    宜しくお願い致します。

    キャンセル

回答 3

checkベストアンサー

+1

$( 'body' ).on( 'click', 'input[type=file]', function() { /* 省略 */ } );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/13 23:33

    ご回答ありがとうございます。

    すいません、頂いたご回答の
    $( 'body' ).on( 'click', 'input[type=file]', function() { /* 省略 */ } );
    はどこに入れれば良いのでしょうか?
    また、/* 省略 */の部分は何が省略されているのでしょうか。
    コードがある程度ありますので、どの部分に当てはめれば良いのか分かり兼ねております。

    申し訳ありませんが、ご教授お願い致します。

    キャンセル

  • 2016/12/14 13:58

    頂いた内容で全て解決したわけではないのですが、kei344さんに頂いた内容でかなり前に進めましたので、ベストアンサーに選ばさせて頂きました。

    ありがとうございました。

    キャンセル

+1

jQuery なら複数ファイルアップロードを行うためのプラグインがありますから、そちらを使う方が楽だと思います。

例えばこれとか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/13 12:31

    ご回答ありがとうございます。
    参考にさせて頂きます。

    ただ、今回はこちらの都合で現状のソースを使用しないといけないため、ソースを編集して、何とかしたいと思っています。

    キャンセル

+1

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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • ファイルをアップロードするボタンを複数設置して、ファイル容量に対してダイヤログを出したいです。宜しくお願いします。