Обмен файловых элементов ввода с помощью jQuery - PullRequest
Новая
       36

Обмен файловых элементов ввода с помощью jQuery

0 голосов
/ 23 августа 2011

Я создаю веб-сайт, где пользователи могут загружать изображения.Я не хочу использовать флэш-плагин, такой как SWFUpload или Uploadify, но я бы хотел, чтобы они могли загружать сразу несколько изображений.Это привело бы меня к использованию файлового ввода с установленным атрибутом multiple="".Проблема в том, что пользователь может выбрать только несколько изображений из одного каталога на своем компьютере.

Чтобы противостоять этому, у меня возникла идея, которая включает в себя Javascript.У меня есть файл ввода на моей странице с установленным атрибутом multiple, и когда пользователь выбирает некоторые файлы с этим вводом файла, я затем скрываю его с помощью CSS.После этого я использую Javascript для размещения нового файла на его месте, который пользователь может использовать для загрузки большего количества файлов из разных каталогов.Таким образом, когда у пользователя есть все изображения, которые он хочет загрузить, у меня есть форма с отправкой нескольких файловых входов, которую я могу обработать, используя PHP в качестве моего бэкенда.

Это моя соответствующая разметка: 

<div id="select_images">
    <input type="file" name="files[]" multiple="multiple" />
</div>

И мой Javascript (с использованием библиотеки jQuery): 

$('#select_images input:first').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Place a new file input to take its place
    $(this).before('<input type="file" name="files[]" multiple="multiple" />');
});

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

<div id="select_images">
    <input type="file" multiple="multiple" name="files[]">
    <input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>

Вот где проблемы.Если я выберу больше файлов для загрузки с использованием нового файла, введенного с помощью jQuery, ничего не произойдет.Новый ввод файла, вставленный с использованием jQuery, похоже, не принимает файл, так как Firebug не показывает никаких файловых данных, относящихся к вводу.Есть ли какая-то защита, мешающая мне помещать файлы во входные данные, вставляя их в DOM, используя Javascript?

Спасибо!

1 Ответ

0 голосов
/ 23 августа 2011

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

Тем временем вы можете создать новый элемент формы с новым полем файла внутри него.Промойте и повторите!

Что касается вашей конкретной проблемы, то здесь нет никаких ограничений безопасности.Вы базируете проблему исключительно на Firebug или пытаетесь отправить форму на сервер?Существуют ограничения безопасности относительно способности javascript просматривать значение входного файла, и это может повлиять на Firebug.

...