从JQuery文件input中获取数据
我其实有一个文件input，我想检索文件的Base64数据。
我试过了：
$('input#myInput')[0].files[0] 检索数据。 但它只提供名称，长度，内容types而不是数据本身。
实际上我需要这些数据将它们发送到Amazon S3
我已经testing了API，并且当我通过带有编码types“multipart / form-data”的html格式发送数据的时候，它就起作用了。
我使用这个插件： http : //jasny.github.com/bootstrap/javascript.html#fileupload
这个插件给了我一个图片的预览，我检索图像预览的src属性中的数据。 但是当我发送这些数据到S3它不起作用。 我可能需要像“multipart / form-data”那样对数据进行编码，但我不知道为什么。
有没有一种方法来检索这些数据而不使用HTML表单？
你可以尝试像这样的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>
input文件元素：
<input type="file" id="fileinput" />
获取文件：
var myFile = $('#fileinput').prop('files');
我创build了一个表单数据对象并附加了这个文件：
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实现
带有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>
<script src="~/fileupload/fileinput.min.js"></script> <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
下载名为fileinput的上述文件，将您的索引页面添加到path中。
<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>
HTML：
<input type="file" name="input-file" id="input-file">
jQuery的：
var fileToUpload = $('#input-file').prop('files')[0];
我们只想得到第一个元素，因为prop（'files'）返回数组。
