从JQuery中的文件输入获取数据 [英] Get data from file input in JQuery
问题描述
我试过：
$（'input＃myInput'）[0] .files [0]
来检索数据。但是它只提供名称，长度，内容类型，而不是数据本身。
我实际上需要这些数据将其发送到Amazon S3
我已经测试了API，当我通过html格式发送数据时，编码类型为multipart / form-data就可以工作。
我使用这个插件： http://jasny.github.com/bootstrap/javascript。 html＃fileupload
这个插件给了我一幅图片的预览，并且在图像预览的src属性中检索数据。但是当我发送这些数据到S3它不工作。我可能需要对multipart / form-data这样的数据进行编码，但我不知道为什么。
有没有办法检索这些数据而不使用html形式？
你可以尝试这样的FileReader API。
<！DOCTYPE html>
< html>
< head>
< script>
函数handleFileSelect（）
{
if（！window.File ||！window.FileReader ||！window.FileList ||！window.Blob）{
alert（'文件API在此浏览器中不完全支持。
返回;
}
input = document.getElementById（'fileinput'）;
if（！input）{
alert（Um，找不到fileinput元素）;
}
else if（！input.files）{
alert（此浏览器似乎不支持文件输入的files属性。
}
else if（！input.files [0]）{
alert（请在点击加载之前选择一个文件）;
}
else {
file = input.files [0];
fr = new FileReader（）;
fr.onload = receivedText;
//fr.readAsText(file）;
fr.readAsDataURL（file）;
}
}
函数receivedText（）{
document.getElementById（'editor'）。appendChild（document.createTextNode（fr.result））;
}
< / script>
< / head>
< body>
< input type =fileid =fileinput/>
< input type ='button'id ='btnLoad'value ='Load'onclick ='handleFileSelect（）;'>
< div id =editor>< / div>
< / body>
< / html>
I actually have a file input and I would like to retrieve the Base64 data of the file.
I tried:
$('input#myInput')[0].files[0]
to retrieve the data. But it only provides the name, the length, the content type but not the data itself.
I actually need these data to send them to Amazon S3
I already test the API and when I send the data through html form with encode type "multipart/form-data" it works.
I use this plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload
And this plugins gives me a preview of the picture and I retrieve data in the src attribute of the image preview. But when I send these data to S3 it does not work. I maybe need to encode the data like "multipart/form-data" but I don't know why.
Is there a way to retrieve these data without using an html form?
you can try FileReader API something like this.
<!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>
这篇关于从JQuery中的文件输入获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
