从 JQuery 中的文件输入中获取数据

小编典典

从 JQuery 中的文件输入中获取数据

all

我实际上有一个文件输入，我想检索文件的 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 表单的情况下检索这些数据？

阅读 137

2022-08-15

共1个答案

小编典典

你可以试试 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-08-15