JavaScriptファイル操作

操作ファイル
HTMLフォームでは、ファイルをアップロードできる唯一のコントロールは、フォームが含まれている場合、フォームのenctypeはmultiiprt/from-dataとして作成しなければなりません.methodはpostとして作成しなければなりません.ブラウザは正しくコード化され、multiputy/form-data形式でフォームを送信することができます.セキュリティ上で、ブラウザはユーザーがクリックするだけでローカルファイルを選択できます.JavaScriptでのvalue割り当ては効果がありません.ユーザーがあるファイルをアップロードした後、JavaScriptもこのファイルの真実なパスを獲得できませんでした.アップロードされたファイルはバックグラウンドサーバで処理されます.JavaScriptはフォームを提出する時にファイルの拡張子をチェックして、ユーザーが無効なフォーマットのファイルをアップロードするのを防ぐことができます.

var f = document.getElementById('test-file-upload');
var filename = f.value;
if (!filename || !(filename.endsWith('.jpg')||filename.endsWith('.png')||filename.endsWith('.gif'))) {
alert('can only upload image file.')
return false;
}

File API
JavaScriptはユーザにアップロードされたファイルの操作が非常に限られています.特にファイルの内容を読み取ることができません.多くの操作ファイルが必要なウェブページはFlashのような第三者プラグインを使用してHTML 5の普及に伴い、新たに追加されたFileAPIはJavaScriptファイルの読み込みを許可します.取得したテキスト情報HTML 5のFielAPIはFileとFilenderの2つの主要なオブジェクトを提供します.ファイル情報を取得し、ファイルを読み込むことができます.次の例では、ユーザが選択した画像ファイルをどのように読み込むかを実証し、画像をプレビューします.

var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
 //   change  :
 fileInput.addEventListenser('change',function(){
    //      
    preview.style.backgroundImage = '';
    //        
    if (!fileInput.value) {
        info.innerHTML = '      ';
        return;
    }
    //  File  
    var file = fileInput.files[0];
    //  file  
    info.innerHTML = `
                      : ${file.name}
                      : ${file.size}
                      : ${file.lastModifiedDate}
                    `;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('         !');
        return;
    }
    //    
    var reader = new FileReader();
    reader.onload = function(e){
        var 
            data = e.target.result;
            preview.style.backgroundImage = 'url(' + data + ')';
    };

    // dataURL       
    reader.readAsDataURL(file);
 });

上記のコードはHTML 5のFileAPIを通じてファイルの内容を読み取る方法を示しています.data URL形式で読み取られたファイルは文字列で、data:image/jpegに似ています.base 64,/9 j/4 AAQSk...(base 64符号化)...設定画像でよく使われていますが、サーバー端処理が必要であれば、文字列base 64を、後の文字列をサーバに送信し、Base 64で復号すれば、元のファイルのバイナリ内容が得られます.
コールバック
上のコードはまた、JavaScriptの重要な特性を示しています.JavaScriptでは、ブラウザのJavaScript実行エンジンがJavaScriptコードを実行する時、いつもシングルスレッドモードで実行します.JavaScriptでは、マルチタスクの実行は、実際には非同期呼出しです.たとえば、上記のコードreader.readAsDataURL(file);は、非同期操作を開始してファイルの内容を読み取ります.非同期操作なので、JavaScriptコードの中ではいつ操作が終了するか分かりません.ですから、先に破損関数を設定してください.

reader.onload = function(e) {
    //         ，       :
};

ファイルの読み込みが完了すると、JavaScriptエンジンが自動的に私達が設定したコールバック関数を呼び出します.コールバック関数を実行すると、ファイルの読み込みが完了しましたので、コールバック関数の内部でファイルの内容を安全に取得することができます.