web-dev-qa-db-ja.com

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

実際にファイル入力があり、そのファイルの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フォームを使用せずにこれらのデータを取得する方法はありますか？

jqueryfilefile-uploadbase64html-input
114
kschaeffler

あなたはこのようなもの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;
    }   

    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 {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      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>
121
Sark

入力ファイル要素：

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

ファイルを取得：

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

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

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

44
mark.inman

HTML：

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

jQuery：

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

Prop（ 'files'）は配列を返すので、最初の要素だけを取得します。

19
cerbin

タイプ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など）。

12
Carlos B. Flores

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);をコメントアウトしてください

9
shramee
 <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>
0
Amit Rana