在 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 表单检索这些数据的方法？

508283 次浏览
小开
最佳答案

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

小开

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

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 解释表单数据对象

小开

输入文件元素:

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

获取文件:

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

使用 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);

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

网址:

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

JQuery:

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

我们希望只获取第一个元素，因为 prop (‘ files’)返回数组。

小开

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

小开

超文本标示语言

<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 获取文件

元素 html:

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

Jquery 代码:

 $("#fileInput")[0].files[0]

这对我有用:)

小开 

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


提交答案