ksc*_*ler 120 jquery base64 file-upload file html-input
我实际上有一个文件输入,我想检索该文件的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表单的情况下检索这些数据？
Sar*_*ark 129
你可以试试像这样的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>
Mor*_*log 127
输入文件元素:
<input type="file" id="fileinput" />
获取文件:
var myFile = $('#fileinput').prop('files');
mar*_*man 48
我创建了一个表单数据对象并附加了该文件:
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的表单数据对象Explination
cer*_*bin 29
HTML:
<input type="file" name="input-file" id="input-file">
jQuery的:
var fileToUpload = $('#input-file').prop('files')[0];
我们只想得到第一个元素,因为prop('files')返回数组.
Car*_*res 14
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),text/plain,image/jpg等)
使用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);
使用jquery获取文件
元素 HTML：
<input id="fileInput" type="file" />
jquery代码：
$("#fileInput")[0].files[0]
这对我有用:)
| 归档时间： |
|
| 查看次数： |
337436 次 |
| 最近记录： |