QA@IT

【jQuery】ファイルアップロードと同時にサムネイル生成【File API】

4570 PV

ファイルアップロードと同時にサムネイルを生成するスクリプトを書いております。

■具体的には以下のとおりです。
・ファイル選択ボタンは3つ
・ファイル選択ボタンから画像をアップロードすると、同時にサムネイルが生成される。
・jQueryとFile APIを利用

■現状のスクリプトは以下のとおりです。

<script type="text/javascript">
$(function() {
    var i=1;
    $("input") .on('click', function(){

        var fileName = $("#uploadFile" + i);
        var imageName = $("#imagePreview" + i);

        $(fileName).on("change", function(){

            var files = !!this.files ? this.files : [];

            // ファイル選択とFileReaderのバリデーション
            if (!files.length || !window.FileReader) return;

            // ファイルが画像かどうかのバリデーション
            if (/^image/.test( files[0].type)){

                // FileReaderのインスタンス化
                var reader = new FileReader();
                // ローカルファイルの読み込み
                reader.readAsDataURL(files[0]);

                // 画像データをCSSで埋め込み
                reader.onloadend = function(){
                        $(imageName).css("background-image", "url("+this.result+")");
                }
            } // End of if

        }) // End of on change function

    i++;
    });
</script>
<div id="imagePreview1"></div>
<input type="file" id="uploadFile1" name="image" class="img" />
<hr>

<div id="imagePreview2"></div>
<input type="file" id="uploadFile2" name="image" class="img" />
<hr>

<div id="imagePreview3"></div>
<input type="file" id="uploadFile3" name="image" class="img" />
<hr>

■問題点
ファイル選択の際に、上から順番に選択をしていけば問題は起きませんが、2番目や3番目以降のファイル選択ボタンが先にクリックされるとエラー(サムネイルが表示されない)が起きる。

■質問事項
上述のとおりですが、問題点を解決するにはどういったコードがありますでしょうか?
初心者丸だしのコードですが、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

回答

このソース上で要は、押したinputタグのidのインデックスが取得できればいいわけで
こんな感じでいいのでは?

$("input").click(function () {
var elm = $(this)[0];
var idx = elm.id.substr(elm.id.length - 1, 1);

var fileName = $("#uploadFile" + idx);
var imageName = $("#imagePreview" + idx);

条件としてinputとdivの末番号が一対一になっているのが条件ですが...

動作確認してませんので、あしからず。

編集 履歴 (0)
  • 完璧に動作しました<(_ _)>ありがとうございます!<(_ _)> -

ちょっと時間がないので、ヒントのみの記入です。

uploadFile3のinputを押したときにこの部分は下記部分どうなるでしょう?

var fileName = $("#uploadFile" + i);
var imageName = $("#imagePreview" + i);

iの値は...?

編集 履歴 (0)
  • ご回答ありがとうございます。
    uploadFile3のinputを押したときは、以下のようになるかと思います。

    var fileName = $("#uploadFile1");
    var imageName = $("#imagePreview1");

    iのカウントがずれているとは思うのですが、for文などで回してもうまくいきませんでした。。おてすきでアドバイス頂けますと幸いです。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。