BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] JQueryでファイル入力からデータを取得する

2022-04-22 02:58:28

質問

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

どのように解決するのですか？

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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します