Javascriptでファイルを選択するには？

Question

ユーザーが自分のWebページに画像をアップロードできるように、Browser Dialogを作成しようとしています。

私は<input type="file">を使用する必要があることを知っていますが、ユーザがbuttonのclickのときに表示されるプロンプトを受け入れたときに情報を取得する場所がわかりません。

私の場合、buttonにclickを入力すると、プロンプトが表示され、このイベントはJavascriptで処理されます。私は、プロンプトが登場したりしていない場合にかかわらず、それを取得しようとしていますので、今undefinedを取得している、もちろん

window.onload = function(){ 
 
    var buttonFile = document.getElementById("buttonFile"); 
 
    var file = document.getElementById("file"); 
 

 
    buttonFile.onclick = function(){ 
 
    document.getElementById("file").click(); 
 
    } 
 

 
    var files = document.getElementById('file').files[0]; //I do not know where to put this line 
 
    alert(files); 
 
}; \t \t \t

#file{ 
 
    display: none; 
 
}

<input type="file" id="file" accept=".jpg, .png, .jpeg"> 
 
<button id="buttonFile">Upload file</button>

：

は、ここに私のコードです。私がbuttonのonclickイベントの内部に行を置くと、その情報もまだありません。また、ファイルのonclickイベントを作成しようとしましたが、受け入れられたことを知らないため情報を取得しません。

だからここに私はいくつかの質問があります。

• 私は私がアップロードしていた画像の値を取得するには、この行を置く必要がありますか？
• 古いブラウザでは入力フィルタがサポートされていないため、サーバー側でも入力フィルタを確認する必要がありますか？
• サーバー側（PHP）で確認したい場合は、フォームにリンクする必要がありますか？

ありがとうございます！

Answer 1

あなたは、ユーザーがそれらをアップロードするまで、ファイルの値を取得する必要はありませんを除いて、右のこれまでのすべてのものを持っています。さもなければ、それは間違いなく未定義です。

window.onload = function() { 
    var buttonFile = document.getElementById("buttonFile"); 
    var file = document.getElementById("file"); 

    buttonFile.onclick = function() { 
    document.getElementById("file").click(); 
    }; 

    file.onchange = function(e){ 
    if (this.files && this.files[0]) { 
     alert(JSON.stringify(this.files[0])); 
    } 
    }; 
}; 

1）onclickハンドラに行を挿入しないでください。 2）旧式のブラウザではタイプがチェックされていない点が正しいです。サーバー側の検証はいつでも実行する必要があります。 3）Webサービスを使用することを決めた場合を除きます。

Answer 2

window.onload = function() { 
 
    var buttonFile = document.getElementById("buttonFile"); 
 
    var file = document.getElementById("file"); 
 

 
    buttonFile.onclick = function() { 
 
    document.getElementById("file").click(); 
 
    }; 
 

 
    file.onchange = function() { 
 
    alert(file.files[0].name); 
 
    }; 
 
};

#file{ 
 
    display: none; 
 
}

<input type="file" id="file" accept=".jpg, .png, .jpeg"> 
 
<button id="buttonFile">Upload file</button>