javascript 以编程方式上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8940283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically uploading a file
提问by Randomblue
I'm using the jQuery file upload plugin which has an APIto programmatically upload files. The documentation writes:
我正在使用 jQuery 文件上传插件，它有一个API来以编程方式上传文件。文档写道：
$('#fileupload').fileupload('add', {files: filesList});
The problem is that I don't know what filesListshould be. I have tried the following unsuccessfully:
问题是我不知道filesList应该是什么。我尝试了以下失败：
$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});
What should filesListbe exactly?
究竟应该filesList是什么？
采纳答案by Sam Greenhalgh
To quote the documentation:
引用文档：
The second argument must be an object with an array (or array-like list) of File or Blob objects as files property.
第二个参数必须是一个对象，该对象将 File 或 Blob 对象的数组（或类似数组的列表）作为 files 属性。
You can get file objects using the files property of a file type input or the HTML5 File API.
您可以使用文件类型输入的 files 属性或 HTML5 File API 获取文件对象。
For more detail regarding working with the FileAPI and file inputs see: MDC - Using files from web applications
有关使用 FileAPI 和文件输入的更多详细信息，请参阅： MDC - 使用来自 Web 应用程序的文件
回答by pedro.dz
ridiculous example :) that works !
荒谬的例子:) 有效！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="fileupload"></div>
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br /><br /><br /><br />
<input id="envoi_fax" type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i><span>Start upload</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-fp.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
<script>
$('document').ready(function () {
var mycars = new Array();
$('#fileupload').fileupload({
url:'server/php/',
dataType: 'json',
singleFileUploads: false,
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
$('.zz').bind('change', function (e) {
var f;
f = e.target.files || [{name: this.value}];
mycars.push(f[0]);
});
$("#envoi_fax").click(function () {
$('#fileupload').fileupload('send', {files: mycars});
});
});
</script>
</body>
</html>
回答by Grooveek
The documentation tells you
文档告诉你
The second argument must be an object with an array (or array-like list) of File
or Blob objects as files property.
while linking File to Mozilla's DOM File object
将 File 链接到Mozilla 的 DOM File 对象时
You should supply an array of these objects
您应该提供这些对象的数组
回答by itsazzad
@pedro.dz answer helped me:
@pedro.dz 的回答帮助了我：
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/';
var filesList=new Array();
$('.fileupload').fileupload({
autoUpload: false,//
url: url,
dataType: 'json',
sequentialUploads: true,
add: function (e, data) {
console.log(data);
$.each(data.files, function (index, file) {
filesList.push(file);
console.log('Added file: ' + file.name);
});
console.log(filesList);
},
send: function (e, data) {
console.log('send:');
console.log(e);
console.log(data);
data.formData = {example: "my data"};
},
done: function (e, data) {
console.log('done:');
console.log(e);
console.log(data);
$.each(data.result.files, function (index, file) {
console.log(file);
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$("#uploadfiles").click(function () {
alert('sending');
$('.fileupload').fileupload('send', {files: filesList});
});
});
For multiple uploads:
对于多次上传：
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>#1 Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>#2 Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files2[]" multiple>
</span>
<input id="formData" type="text" name="formData" value="21212121212">
<input id="uploadfiles" type="button" value="Send">
