Перемещение элементов ввода файлов с помощью jQuery

Question

Я создаю сайт, на котором пользователи могут загружать изображения. Я не хочу использовать Flash-плагин, такой как 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?

Спасибо!

Answer 1

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

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

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