Plupload — ограничение только на один файл

#javascript #plupload

#javascript #plupload

Вопрос:

Я не вижу опции в документах plupload API по ограничению количества загружаемых файлов любым числом, даже 1.

Сбой документа? или сбой функции? Если он не существует, я буду работать над тем, чтобы это произошло, если кому-то это нужно..

Ответ №1:

Это сбой функции. Я создал оболочку вокруг API jQuery, и это то, что я сделал, чтобы заставить его работать на меня. Мой код выполняет некоторую другую бизнес-логику, но этого должно быть достаточно, чтобы установить started .

В принципе, привязка к FilesAdded событию и вызов removeFile объекта uploader (если файлов слишком много). Я думаю, что я добавил тайм-аут в 50 мс, потому что это вызывало у меня проблемы с файлом, который еще не существовал.

 uploader.bind('FilesAdded', function (up, files) {
    var i = up.files.length,
        maxCountError = false;

    plupload.each(files, function (file) {

        if(uploader.settings.max_file_count amp;amp; i >= uploader.settings.max_file_count){
            maxCountError = true;
            setTimeout(function(){ up.removeFile(file); }, 50);
        }else{
            // Code to add pending file details, if you want
        }

        i  ;
    });

    if(maxCountError){
        // Too many files uploaded, do something
    }

});
  

max_file_count это то, что я добавляю в экземпляр pluploader при его создании.


Редактировать: на самом деле мне пришлось сделать два разных способа для этого. Вышесказанное позволит пользователю загружать только определенное количество файлов (и в противном случае генерировать ошибку).

Этот фрагмент работает аналогичным образом, но удаляет существующие файлы и загружает только самые последние:

 uploader.bind('FilesAdded', function (up, files) {
    var fileCount = up.files.length,
        i = 0,
        ids = $.map(up.files, function (item) { return item.id; });

    for (i = 0; i < fileCount; i  ) {
        uploader.removeFile(uploader.getFile(ids[i]));
    }

    // Do something with file details
});
  

Комментарии:

1. Как я упоминал в своем комментарии к другому ответу, кажется, что max_file_count это было добавлено в виджет пользовательского интерфейса jQuery. Это по-прежнему не относится к моему приложению, так как я хотел, чтобы люди могли загружать X количество файлов (поэтому необходимо учитывать существующие загруженные файлы в корзине)

2. спасибо за способ, который будет работать без необходимости разветвлять их JS 😉

3. Второй представленный способ удалил все мои файлы, s.th . не осталось файлов для работы. Запуск цикла только для i < (fileCount - 1) сохранения только самого последнего добавленного файла.

Ответ №2:

Другой способ сделать это:

  $(document).ready(function () {
    var uploader = new plupload.Uploader({
        ...
        multi_selection: false,
       ....
     });
  

С уважением

Комментарии:

1. По-видимому, не работает для drag’n’drop … (в текущей версии)

Ответ №3:

Основываясь на втором ответе Джонатона Болстера, я написал этот более простой фрагмент, чтобы ограничить загрузку последним выбранным файлом:

 uploader.bind('FilesAdded', function(up, files) {
    while (up.files.length > 1) {
        up.removeFile(up.files[0]);
    }
});
  

Комментарии:

1. Кажется, что это срабатывает в неправильной точке (до его добавления), по крайней мере, для интерфейса html5. Новый файл добавляется после запуска этого обратного вызова. Это приводит к ограничению до 2 файлов, а не одного.

2. (Исправлено с нулевым значением setTimeout для добавления в конец цикла событий.)

3. Это также не работает при загрузке перетаскиванием, так как вы можете добавлять более двух файлов одновременно.

4. Это должно быть. Файлы. длина> 0, поскольку это срабатывает до фактического добавления файла в очередь. т.е. в первый раз длина будет равна 0, во второй раз она будет равна единице. Вы хотите удалить его уже тогда

Ответ №4:

Вы можете использовать это max_file_count: 5 , где 5 — максимальное количество загрузок.

Комментарии:

1. Это не работает. max_file_count это не стандартная настройка в plupload

2. Я добавил свой текущий код, используя проверку! И да, этого нет в примерах на сайте.

3. Или же вы можете обратиться к этому вопросу plupload.com/punbb/viewtopic.php?pid=5102

4. Ах-ха — я исправлен. Кажется, что виджет пользовательского интерфейса jQuery max_file_count реализовал ( github.com/moxiecode/plupload/blob/master/examples/jquery /… ). Кроме того, обратите внимание, что добавление кода или чего-либо еще должно выполняться путем редактирования вашего ответа (если это не совсем другой ответ)

5. Если вы ограничиваете доступ к одному файлу, вы также можете захотеть: ‘multi_selection: false, // Отключить выбор нескольких файлов в диалоговом окне «Открыть файл»‘

Ответ №5:

Почему бы не просто

     if (files.length > 1) uploader.splice(1, files.length - 1);
  

Ответ №6:

Попробуйте это. Для меня это работает нормально.

 uploader.bind('FilesAdded', function(up, files) {

if(uploader.files.length > 1)
{
    uploader.removeFile(uploader.files[0]);
    uploader.refresh();// must refresh for flash runtime
}
  

. . . resto

Идея состоит в том, чтобы протестировать num-файлы в текущем объекте загрузчика. Если длина больше 1, то просто используйте метод uploader.removeFile . Обратите внимание, что аргумент — files[0] это не идентификатор файла, а полный файловый объект.

 ({id:"p17bqh1v4dp42gdf1gan75p16tp3", name:"gnome-globe.png", size:48456, loaded:0, percent:0, status:1})
  

С наилучшими пожеланиями!

Ответ №7:

теперь вы можете отключить множественный выбор, установив для параметра multi_selection значение false

точно так же, как это

 var uploader = new plupload.Uploader({
    runtimes : 'html5,flash',
    browse_button : 'button_id',
    multi_selection:false,  //disable multi-selection
...
  

официальный документ здесь: http://www.plupload.com/documentation.php

Ответ №8:

     FilesAdded: function(up, files) {
        up.files.splice(0,up.files.length-1);
    },
    multi_selection: false,
  

используйте up.files , просто files . files всегда будет содержать один элемент, который мы выбираем из файлового браузера. up.files это фактический список, который нам нужно сжать до последнего выбранного файла.

Ответ №9:

Разрешить загрузку только одного файла:

 uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});
  

Разрешить одновременный выбор одного файла:

 uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(i){up.removeFile(file); return;}
    });
});
  

Разрешить одновременную загрузку одного файла:

 uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});
uploader.bind('FileUploaded', function(up, file,response) {
    up.removeFile(file);
});
  

Ответ №10:

Я понимаю, что на это был дан ответ, но решение, с которым я пошел, заключалось в том, чтобы просто использовать обратный QueueChanged вызов:

 QueueChanged: function(uploader) {
    // Called when queue is changed by adding or removing files
    //log('[QueueChanged]');
    if(uploader.files.length > 1) {
        uploader.files.splice(0, (parseInt(uploader.files.length) - 1));
    }
}
  

С помощью этого кода сохраняется только последний выбранный файл (на случай, если причина, по которой они выбрали снова, заключалась в том, что они выбрали неправильный файл).

Ответ №11:

Если вы хотите использовать пользовательский загрузчик и загружать по одному файлу за раз, без автоматической загрузки, а последний добавленный файл становится новым файлом, используйте это.

 uploader.bind('FilesAdded', function(up, files) {
    // Clear the HTML
    $('#plupload-files').html('');

    // Plup does not offer before file added event
    if (up.files.length > 1) {
        up.splice(0, up.files.length);
        up.addFile(files[0])
        return;
    }

    // $.each(files, function(){....
}
  

Мы объединяем весь массив, потому что plup уже добавляет все файлы в очередь, и если вы объедините очередь, как принятый ответ, вы фактически добавите один файл каждый раз, когда пользователь попытается добавить файлы, и если они попытаются добавить новый файл отдельно, он сохранит старый файл в pos [0]в массиве files,

Затем мы добавляем первый файл из файлов, которые они пытались добавить. Таким образом, в очереди всегда есть только один файл, и это всегда первый файл в последней группе файлов, которые они пытались добавить.

ie.

Перетащите в plupload ‘file1.jpg ‘, ‘file2.jpg ‘, ‘file3.jpg ‘

очистить всю очередь, добавить обратно ‘file1.jpg ‘

Перетащите в plupload ‘file4.jpg ‘, ‘file5.jpg ‘, ‘file6.jpg ‘

очистить всю очередь, добавить обратно ‘file4.jpg ‘

Перетащите в plupload ‘file99.jpg ‘

очистить всю очередь, добавить обратно ‘file99.jpg ‘

Это позволяет вам управлять пользовательскими добавлениями, если вы хотите загружать только один файл за раз. Как указано, другие ответы работают только один раз или с автоматической загрузкой.

Ответ №12:

Удалите ненужные файлы непосредственно перед загрузкой:

 $('uploadfiles').onclick = function()
            {
                while (uploader.files.length > 1)
                {
                        uploader.removeFile(uploader.files[0]);
                }

                uploader.start();
                return false;
            };
  

Ответ №13:

Попробовав каждое из решений, я пришел к самому простому из всех — который, кажется, работает.

Я использую core api, и для multi_selection установлено значение false. Затем, после выбора (добавления) первого файла, вторая строка кода, которую я вставил в событие FilesAdded, скрывает ссылку для просмотра. Я не думаю, что это можно сделать с помощью виджетов jquery, и я также обнаружил, что, если ссылка для загрузки не указывает, где находится ссылка для просмотра, она остается живой.

 uploader.bind('FilesAdded', function(up, files) {
//line below hides button
document.getElementById("browse").style.display = "none";

var html = '';
plupload.each(files, function(file) {
html  = '<li id="'   file.id   '">'   file.name   ' ('   plupload.formatSize(file.size)   ') <b></b></li>';
});
document.getElementById('filelist').innerHTML  = html;
  

});