从JQuery文件输入中获取数据
I actually have a file input and I would like to retrieve the Base64 data of the file.
我实际上有一个文件输入,我想检索文件的Base64数据。
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
实际上,我需要这些数据将它们发送到Amazon S3
I already test the API and when I send the data through html form with encode type "multipart/form-data" it works.
我已经对API进行了测试,当我通过html表单发送数据时,会使用编码类型的“multipart/form-data”进行编码。
I use this plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload
我使用这个插件: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.
这个插件为我提供了图片的预览,我在图像预览的src属性中检索数据。但是当我将这些数据发送到S3时,它就不起作用了。我可能需要对数据进行编码,比如“multipart/form-data”,但我不知道为什么。
Is there a way to retrieve these data without using an html form?
有没有一种不用html表单就能检索这些数据的方法?
7 个解决方案
#1
100
you can try FileReader API something like this.
你可以试试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>
更多相关文章
- 如何将表单转换成json通过AJAX传递?
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
- Yii - 加载ajax表单元素的用户端验证
- JQuery 表单验证按钮提交之前变色
- 使用AJAX将动态数据传递给mvc控制器
- jquery 阻止表单提交方法
- 使用jQuery确认对话框防止上的表单回发
- jquery对json数据进行增删改查的例子
- 尽管referesh,jQuery格式化不适用于ajax数据