ブラウザ - アクションファイル

唯一のコントロールがHTML形式である、あなたはファイルをアップロードすることができます

< 入力タイプ=「ファイル」>

一般的に、バックエンドサーバの処理によってアップロードされたファイルは、JavaScriptが無効なファイル形式をアップロードするユーザーを防ぐために、フォームを送信するときに、ファイルの拡張子をチェックするために行うことができます。

VaRの F =のdocument.getElementById（ 'テストファイルアップロード' ）;
VaRのファイル名= f.value。// 'C：\ fakepath \ test.png' 
であれば（ファイル名||（filename.endsWith（ 'JPG。 '）|| filename.endsWith（' PNG。 '）|| filename.endsWith（' GIF。'！！）））{ 
    警告（ '画像ファイルのみをアップロードすることができます。' ）;
    返す 偽; 
}

ファイルAPI

ユーザの操作にアップロードされたJavaScriptファイルは特に、非常に限られているため、ファイルを操作するための多くは達成するためにFlashなどのサードパーティ製プラグインを使用していたウェブを作り、ファイルの内容を読み取ることができません。

HTML5の普及によって、新しいファイルAPIにはJavaScriptを有効にし、より多くの情報のためのファイルを、ファイルの内容を読み取ることができます。

HTML5ファイルAPIを提供Fileし、FileReader二つの主要なオブジェクトは、ファイルに関する情報を取得し、ファイルを読むことができます。

次の例では、ユーザが選択した画像ファイル、および読みする方法を示して<div>プレビュー画像を：

<！DOCTYPE HTML > 
< HTML > 

    < ヘッド> 
        < メタ文字コード= "UTF-8" > 
        < タイトル> </ タイトル> 
        < スタイル> 
            .imageView { 
                幅：300ピクセル; 
                高さ：300ピクセル; 
                背景リピート：なしリピート; 
                背景サイズ：含まれています。
                背景の位置：センター;
            } 
        </ スタイル> 
    </ ヘッド> 

    < ボディ> 
        < 入力タイプ= "FILE" ID = "テストイメージファイル"  /> 
        < P ID = "テストファイル情報" > </ P > 
        < IMG ID = "テスト画像プレビュー" クラス= "ImageViewの" > </ P > 
    </ ボディ> 
    < スクリプト> 
        VAR 
            FileInputクラス= のdocument.getElementById（'テストイメージファイル"）、
            情報= のdocument.getElementById（' テスト-FILE-情報' ）、
            プレビュー= のdocument.getElementById（' テストイメージプレビュー' ）;
         // モニタ変更イベント：
        fileInput.addEventListener（' 変更' 、機能（）{
             // クリア背景画像：
            preview.style.backgroundImage =  '' ;
             //は、選択したファイルかどうかを確認する：
            のiF （！fileInput.value）{ 
                info.innerHTML =  "選択されていません';
                 戻り値; 
            } 
            // 取得ファイルの参照：
            VARのファイル= fileInput.files [ 0 ];
             // 取得するファイル情報：
            info.innerHTML =  ' ファイル：'  + file.name +  ' <BR> '  + 
                ' サイズ：'  + file.size +  ' <BR> '  + 
                ' レビュー：'  + file.lastModifiedDate;
             IF （file.type ！==  " 画像/ JPEG '  && file.type ==！ ' 画像/ PNG '  && file.type ==！ ' 画像/ GIF ' ）{ 
                アラート（' ではない有効なイメージファイル！' ）;
                 戻り値; 
            } 
            //を読みますファイル：
            VARのリーダー=  新しい新しいFileReaderの（）; 
            reader.onload =  機能（E）{
                 VARの
                    データ= e.target.result; // 'データ：画像/ JPEG、Base64で、/ 9J / 4AAQSk ...（Base64でエンコードされたが）...'            
                preview.style.backgroundImage =  ' URL（'  + データ+  ' ）' ; 
            }; 
            //はDataURLの形式で文書をお読みください。
            reader.readAsDataURL（ファイル）; 
        }）; 
    </ スクリプト> 

</ HTML >

オリジナル住所ます。https：//www.liaoxuefeng.com/wiki/1022910821149312/1023022494381696

ブラウザ - アクションファイル

ファイルAPI

おすすめ