从JQuery中的文件输入获取数据


136

我实际上有一个文件输入,我想检索该文件的Base64数据。

我试过了:

$('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表单?


为了拥有内容,您将需要以某种方式(iframe,ajax,flash或传统形式)上传内容。
布拉德·克里斯蒂

该文件必须首先上传到服务器。
斯文·范·佐伊伦

3
不一定,如果浏览器支持新的文件API(见html5rocks.com/en/tutorials/file/dndfiles
devnull69

我实际上正在使用此插件jasny.github.com/bootstrap/javascript.html#fileupload,我可以预览文件,因此数据在某处。
kschaeffler 2012年

在这种情况下,“数据”将在服务器上。您必须先将数据输出到客户端(浏览器),然后才能通过Javascript / jQuery访问数据
devnull69'9

Answers:


134

您可以尝试使用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;
        }   
      
        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>


嘿,我尝试了您的解决方案,并且可行。我检索了信息,但编码不正确。对于文件,我得到的\xc3\xbf\xc3不是\xff\xd8\xff图片的前3个字符的编码。我应该使用什么来获取图片的第二个编码?
kschaeffler 2012年

@kschaeffler尝试fr.readAsDataURL(file); 这是读取Base64数据的函数,但我尚未对其进行测试。
Sark

实际上,此功能给我的数据不足。这已经是我在插件jasny.github.com/bootstrap/javascript.html#fileupload中使用的预览中的功能。我认为我检索到的数据不是Base64编码的,这是问题所在,但我不确定
kschaeffler 2012年

我实际上需要与通过“ multipart / form-data”编码类型通过html表单发布时检索的编码数据相同
kschaeffler 2012年

155

输入文件元素:

<input type="file" id="fileinput" />

获取文件:

var myFile = $('#fileinput').prop('files');

12
完美的解决方案!谢谢。改进了单个上载,索引为0。var myFile = $('#fileinput')。prop('files')[0];
polras

太好了,我的脚本可以与Cloudinary一起使用,而无需提交表单。拖放,上传:)
Andy

那正是我所需要的。
Amete Blessed'Apr

好答案!然后,您可以使用$('.myClass').prop('files', myFile );
always-a-learner,

54

我创建了一个表单数据对象并附加了文件:

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的表单数据对象解释


37

HTML:

<input type="file" name="input-file" id="input-file">

jQuery的:

var fileToUpload = $('#input-file').prop('files')[0];

我们只想获取第一个元素,因为prop('files')返回数组。


16

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),文本/纯文本,图像/ jpg等)


9

带有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);


0
 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

下载以上名为fileinput的文件,将路径添加到索引页面。

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.