Программная загрузка файла - PullRequest
Новая
       10

Программная загрузка файла

10 голосов
/ 20 января 2012

Я использую плагин для загрузки файлов jQuery, который имеет API для программной загрузки файлов.В документации написано: 

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

Проблема в том, что я не знаю, каким должно быть filesList.Я безуспешно пробовал следующее: 

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

Каким должно быть filesList точно?

Ответы [ 4 ]

9 голосов
/ 18 октября 2012

смешной пример :), который работает! 

<!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>
5 голосов
/ 20 января 2012

Цитировать документацию :

Второй аргумент должен быть объектом с массивом (или списком в виде массива) объектов File или Blob в качестве свойства files.

Вы можете получить файловые объекты, используя свойство files ввода типа файла или HTML5 File API.

Подробнее о работе с FileAPI и вводом файла см. MDC - Использование файлов из веб-приложений

0 голосов
/ 19 августа 2015

@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">
0 голосов
/ 20 января 2012

Документация говорит вам 

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

при связывании Файла с Файловым объектом Mozilla DOM

Вы должны предоставить массив этих объектов

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...