Question

我正在使用jQuery文件上传插件，它有API以编程方式上传文件。文档写道：

$('#fileupload').fileupload('add', {files: filesList});

问题在于我不知道filesList应该是什么。我尝试了以下尝试失败：

$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});

filesList究竟应该是什么？

Answer 1

荒谬的例子:)有效！

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

Answer 2

引用the documentation：

第二个参数必须是具有File或Blob对象的数组（或类数组列表）作为files属性的对象。

您可以使用文件类型输入的文件属性或HTML5文件API来获取文件对象。

有关使用FileAPI和文件输入的更多详细信息，请参阅： MDC - Using files from web applications

Answer 3

文档告诉你

The second argument must be an object with an array (or array-like list) of File
or Blob objects as files property.

将文件链接到Mozilla's DOM File object

时

您应该提供这些对象的数组

Answer 4

@ 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});
    });

});

对于多次上传：

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

以编程方式上传文件

4 个答案: