Question

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

Answer 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;
    }   

    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>

Answer 2

输入文件元素：

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

获取文件：

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

Answer 3

我创建了一个表单数据对象并附加了文件：

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对象，那么在线有一些文档，但并不多。 Form Data Object Explination by Mozilla

Answer 4

HTML：

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

jQuery的：

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

我们只想获得第一个元素，因为prop（'files'）返回数组。

Answer 5

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），文本/纯文本，图像/ jpg等）

Answer 6

带有jQuery的FileReader API，简单的例子。

<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);行并发表评论{{1}}

Answer 7

 <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>

Answer 8

HTML

<div class="row form-group my-2">
                <div class="col-12">
                    <div class="">
                        <div class="text-center">
                            <label for="inpImage" class="m-2 pointer">
                                <img src="src/img/no-image.jpg" id="img-visor" height="120" class="rounded mx-auto d-block">
                            </label>
                            <input type="file" class="visually-hidden" accept="image/*" name="picture" id="inpImage">
                        </div>
                    </div>
                </div>
            </div>

jQuery

$('#inpImage').change(()=>{
const file = $('#inpImage').prop("files")[0];
const imagen = URL.createObjectURL(file);
console.log(URL.createObjectURL(file));
$('#img-visor').attr('src', imagen);
});

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

8 个答案: