从JQuery中的文件输入获取数据
从JQuery中的文件输入获取数据
提问于 2012-09-05 20:47:13
我实际上有一个文件输入，我想检索该文件的Base64数据。
我试过了：
$('input#myInput')[0].files[0] 来检索数据。但它只提供名称、长度、内容类型，而不提供数据本身。
我实际上需要这些数据才能将它们发送到亚马逊S3
我已经测试了API，当我通过编码类型为"multipart/ form - data“的html表单发送数据时，它可以工作。
我使用这个插件：http://jasny.github.com/bootstrap/javascript.html#fileupload
这个插件为我提供了图片的预览，并且我在图像预览的src属性中检索数据。但是，当我将这些数据发送到S3时，它不起作用。我可能需要像"multipart/form- data“这样对数据进行编码，但我不知道为什么。
有没有办法在不使用html表单的情况下检索这些数据？
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-09-05 21:08:12
您可以尝试使用FileReader接口。这样做：
<!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>
Stack Overflow用户
发布于 2013-10-31 03:42:30
输入文件元素：
<input type="file" id="fileinput" />获取文件：
var myFile = $('#fileinput').prop('files');Stack Overflow用户
发布于 2013-10-23 22:28:36
我创建了一个表单数据对象并附加了该文件：
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12281775
复制相关文章
相似问题
腾讯云开发者
