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

【问题标题】：Get data from file input in JQuery从 JQuery 中的文件输入中获取数据
【发布时间】：2012-08-30 04:37:40
【问题描述】：

我实际上有一个文件输入，我想检索文件的 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 表单的情况下检索这些数据？

【问题讨论】：

为了获得内容，您需要以某种方式（iframe、ajax、flash 或传统形式）上传。
文件必须先上传到服务器。
不一定，如果浏览器支持新的文件API（见html5rocks.com/en/tutorials/file/dndfiles）
我实际上正在使用这个插件jasny.github.com/bootstrap/javascript.html#fileupload，我可以预览文件，这样数据就在某个地方。
在这种情况下，“数据”将在服务器上。您必须先将数据输出到客户端（浏览器），然后才能通过 Javascript/jQuery 访问它

标签： jquery file file-upload base64 html-input

【解决方案1】：

使用 jquery 获取文件

元素html：

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

jquery 代码：

 $("#fileInput")[0].files[0]

这对我有用:)

【讨论】：

【解决方案2】：

HTML

<div class="row form-group my-2">
                <div class="col-12">
                    <div class="">
                        <div class="text-center">
                            <label for="inpImage" class="m-2 pointer">
                                <img src="src/img/no-image.jpg" id="img-visor" height="120" class="rounded mx-auto d-block">
                            </label>
                            <input type="file" class="visually-hidden" accept="image/*" name="picture" id="inpImage">
                        </div>
                    </div>
                </div>
            </div>

jQuery

$('#inpImage').change(()=>{
const file = $('#inpImage').prop("files")[0];
const imagen = URL.createObjectURL(file);
console.log(URL.createObjectURL(file));
$('#img-visor').attr('src', imagen);
});

【讨论】：

【解决方案3】：

您可以尝试 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 尝试 fr.readAsDataURL(file);这是读取Base64数据的函数，但我还没有测试过。
实际上这个函数没有给我足够的数据。这已经是我在插件 jasny.github.com/bootstrap/javascript.html#fileupload 中使用的预览版了。我认为我检索的数据不是 Base64 编码的，这是问题所在，但我不确定
我实际上需要的编码数据与我通过“multipart/form-data”编码类型的 html 表单发布时检索到的编码数据相同

【解决方案4】：

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 等）

【讨论】：

【解决方案5】：

HTML：

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

jQuery:

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

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

【讨论】：

【解决方案6】：

 <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>

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

输入文件元素：

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

获取文件：

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

【讨论】：

完美解决方案！谢谢。单次上传的改进，索引 0。 var myFile = $('#fileinput').prop('files')[0];
太好了，让我的脚本与 Cloudinary 一起工作，而无需提交表单。拖放，上传:)
这正是我所需要的。
很好的答案！然后您可以使用$('.myClass').prop('files', myFile ); 移动变量

【解决方案9】：

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

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 对象，网上有一些文档，但不多。 Form Data Object Explination by Mozilla

【讨论】：