JQueryのファイル入力からデータを取得する

136

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

私は試した：

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

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

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

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

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

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

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

— シェフラー
ソース

コンテンツを取得するには、何らかの方法（iframe、ajax、flash、または従来の形式）でコンテンツをアップロードする必要があります。

— ブラッドクリスティ

最初にファイルをサーバーにアップロードする必要があります。

— Sven van Zoelen 2012

3

ブラウザが新しいFile APIをサポートしている場合（html5rocks.com/en/tutorials/file/dndfilesを参照）

— devnull69

私は実際にこのプラグインjasny.github.com/bootstrap/javascript.html#fileuploadを使用しており、データがどこかにあるようにファイルのプレビューを取得できます。

— kschaeffler 2012

その場合、「データ」はサーバー上にあります。Javascript / jQueryを介してアクセスする前に、クライアント（ブラウザ）にデータを出力する必要があります

— devnull69

134

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>

スニペットを展開

— サーク
ソース

ねえ、私はあなたの解決策を試しました、そしてそれはうまくいきます。情報を取得しましたが、十分にエンコードされていません。ファイルの場合、画像の最初の3文字に対して\xc3\xbf\xc3このエンコードを取得する代わりに取得します\xff\xd8\xff。写真の2番目のエンコードを取得するには何を使用すればよいですか？

— kschaeffler 2012

@kschaeffler try fr.readAsDataURL（file）; これはBase64データを読み取る関数ですが、まだテストしていません。

— Sark

実際、この関数では十分なデータが得られません。これは、プラグインjasny.github.com/bootstrap/javascript.html#fileuploadで使用するプレビューからすでに取得したものです。私が取得したデータはBase64エンコードされていないと思いますが、これは問題ですが、よく

— わかり

「multipart / form-data」エンコードタイプを使用してHTMLフォームを介して投稿するときに取得するのと同じエンコードデータが実際に必要です

— kschaeffler

156

入力ファイル要素：

<input type="file" id="fileinput" />

ファイルを取得：

var myFile = $('#fileinput').prop('files');

— モリログ
ソース

12

完璧なソリューション！ありがとうございました。単一アップロード、インデックス0の改善。varmyFile = $（ '＃fileinput'）。prop（ 'files'）[0];

— polras 16

すばらしい、フォームを送信しなくてもスクリプトがCloudinaryで動作するようになりました。ドラッグ

— アンド

それがまさに私が必要としていたことです。

— Amete Blessed

素晴らしい答え!! 次に、変数を次のように移動できます$('.myClass').prop('files', myFile );

— 常に学習者

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によるフォームデータオブジェクトの説明

— mark.inman
ソース

37

HTML：

<input type="file" name="input-file" id="input-file">

jQuery：

var fileToUpload = $('#input-file').prop('files')[0];

prop（ 'files'）は配列を返すため、最初の要素のみを取得します。

— セルビン
ソース

16

input タイプの要素 file

<input id="fileInput" type="file" />

あなたにinput変更使用しFileReaderたオブジェクトを、あなたの読みinputファイルプロパティを：

$('#fileInput').on('change', function () {
    var fileReader = new FileReader();
    fileReader.onload = function () {
      var data = fileReader.result;  // data <-- in this var you have the file data in Base64 format
    };
    fileReader.readAsDataURL($('#fileInput').prop('files')[0]);
});

FileReaderはファイルをロードしfileReader.result、Base64形式のファイルデータ（ファイルコンテンツタイプ（MIME）、text / plain、image / jpgなど）を持ちます

— カルロスB.フローレス
ソース

9

FileReader APIとjQuery、簡単な例。

( 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);

— シュラミー
ソース

0

 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

上記のfileinputという名前のファイルをダウンロードして、インデックスページにパスを追加します。

<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"       
 `enter code here`accept=".pdf" multiple>
</div>

<script>
        $("#uploadFile1").fileinput({
            autoReplace: true,
            maxFileCount: 5
        });
</script>

— アミット・ラナ
ソース