Inputボックスtype=fileで選択したファイルオブジェクトを取得する方法(FileReader)

3679 ワード

httml 5

最近、突発的に今よく使われている画像をアップロードしてからアイコンを切り取って保存したいと思っているケースがあるので、inputボックスがファイルがトリガーしたイベントを選択するなどの準備をしています.このセクションでは、inputのtype=fileのinputボックスのファイルデータをどのように取得するかを保存します.
Inputで選択したファイルのデータを取得するには、jsパッケージされたFileReaderオブジェクトを使用する必要があります.
オブジェクトの取得:
まず、FileReaderによって関数を構築してオブジェクトをインスタンス化する必要があります.

var reader = new FileReader();

そして呼び出し

 FileReader.readAsDataURL()は、  されたデータオブジェクト(inputを  する、 えばinput.files[0])を  し、データ み しが  するとFileReader.onloadイベントをトリガーし、onloadにfunctionを  して  された  データを  することができる. えば: 
   
   FileReader.οnlοad=function (oFREvent) {
  console.log(oFREvent.target.result);
};  
                    base64      ，              ，            data:image/ ，        ，                ，              。 
  ps：   input     multiple  ，            。   ：html5，ie10+。 
           ，    ：input.files         ，                ，    input.files[0]          。            （size），     （name）     （type）。        jpg   ，   type  image/jpeg。 
    ，            type                。             ，           ： 
   
   /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i       ，             ： 
   
   
   /image\/\w+/           
   
   
   /image\/\w+/.test(file.type)//          true  
  
     mdn       ： 
   
   
          
   
    
    FileReader.onabortabortイベントのハンドラ.このイベントは、 み み  が  されるたびにトリガーされます.FileReader.onerror  errorイベントのハンドラ.このイベントは、 み み  でエラーが  するたびにトリガーされます.FileReader.onload  loadイベントのハンドラ.このイベントは、 み み  が  に  するたびにトリガーされます.FileReader.onloadstart  loadstartイベントのハンドラ.このイベントは、 み りが  されるたびにトリガーされます.FileReader.onloadend  loadendイベントのハンドラ.このイベントは、 み り  が  (  または  )するたびにトリガーされます.FileReader.onprogress  progressイベントのハンドラ. むBlobコンテンツの  、このイベントがトリガーされます.FileReader.abort() み りを  します. ってきたら、readyState はDONE . FileReader.readAsArrayBuffer()  されたコンテンツの み りを  Blob、  すると、resultプロパティにはArrayBufferは、ファイルのデータを す.FileReader.readAsBinaryString()   
  した  の み みを  Blob、  すると、resultプロパティには、   として のバイナリデータがテキスト  で まれます.FileReader.readAsDataURL()  された  の み めBlob、  すると、result  は のとおりです.data:は、ファイルデータのURLを す.FileReader.readAsText()  されたコンテンツの み りを  Blob、  すると、result  は、ファイルの  をテキスト   として む.

Canvasの基本原理

Javascriptのオリジナルドラッグ&ドロップを深く理解する