176

実際にファイル入力があり、ファイルのBase64データを取得したいと思います。

私は試した：

$('input#myInput')[0].files[0]

データを取得します。ただし、名前、長さ、コンテンツタイプのみが提供され、データ自体は提供されません。

これらのデータをAmazonS3に送信するには、実際にこれらのデータが必要です

私はすでにAPIをテストしており、エンコードタイプ「multipart/form-data」のhtmlフォームを介してデータを送信すると機能します。

私はこのプラグインを使用しています：http：//jasny.github.com/bootstrap/javascript.html#fileupload

そして、このプラグインは私に画像のプレビューを提供し、画像プレビューのsrc属性でデータを取得します。しかし、これらのデータをS3に送信すると、機能しません。「multipart/form-data」のようにデータをエンコードする必要があるかもしれませんが、その理由はわかりません。

htmlフォームを使用せずにこれらのデータを取得する方法はありますか？

4

9 に答える 9

147

FileReader API を試すことができます。次のようにします。

<!DOCTYPE html>
<html>
  <head>
    <script>        
      function handleFileSelect()
      {               
        if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
          alert('The File APIs are not fully supported in this browser.');
          return;
        }   
      
        var input = document.getElementById('fileinput');
        if (!input) {
          alert("Um, couldn't find the fileinput element.");
        }
        else if (!input.files) {
          alert("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
          alert("Please select a file before clicking 'Load'");               
        }
        else {
          var file = input.files[0];
          var fr = new FileReader();
          fr.onload = receivedText;
          //fr.readAsText(file);
          //fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
          fr.readAsDataURL(file);
        }
      }
      
      function receivedText() {
        document.getElementById('editor').appendChild(document.createTextNode(fr.result));
      }           
      
    </script>
  </head>
  <body>
    <input type="file" id="fileinput"/>
    <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
    <div id="editor"></div>
  </body>
</html>

于 2012-09-05T13:08:11.550 に答える
54

フォーム データ オブジェクトを作成し、ファイルを追加しました。

var form = new FormData(); 
form.append("video", $("#fileInput")[0].files[0]);

そして私は得た：

------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv

送信されたヘッダーで。ファイルが送信され、サーバー上のフォルダーに保存されているため、これが機能することを確認できます。FormData オブジェクトの使用方法がわからない場合は、オンラインのドキュメントがいくつかありますが、それほど多くはありません。Mozillaによるフォームデータオブジェクトの説明

于 2013-10-23T14:28:35.690 に答える
13

jQuery を使用した FileReader API、簡単な例。

( function ( $ ) {
	// Add click event handler to button
	$( '#load-file' ).click( function () {
		if ( ! window.FileReader ) {
			return alert( 'FileReader API is not supported by your browser.' );
		}
		var $i = $( '#file' ), // Put file input ID here
			input = $i[0]; // Getting the element from jQuery
		if ( input.files && input.files[0] ) {
			file = input.files[0]; // The file
			fr = new FileReader(); // FileReader instance
			fr.onload = function () {
				// Do stuff on onload, use fr.result for contents of file
				$( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )
			};
			//fr.readAsText( file );
			fr.readAsDataURL( file );
		} else {
			// Handle errors here
			alert( "File not selected or browser incompatible." )
		}
	} );
} )( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<input type='button' id='load-file' value='Load'>
<div id="file-content"></div>

テキストとして読むには...//fr.readAsText(file);行のコメントを外してコメントしますfr.readAsDataURL(file);

于 2016-09-27T09:22:44.087 に答える