Можно ли создать файл ввода с выбранным файлом

Question

Итак, скажем, у меня есть один вход, подобный этому:

<input id="test" multiple="true" type="file" name="image_name[]" />

А теперь, после того, как я выбрал несколько файлов, я бы хотел "перевести" их на простые inputs как то так

var offset = 0;
$.each($("#test")[0].files, function(i, file){
   $("#my_form").prepend(
  '<input type="file" name="image" value="'+$("#test")[0].item(offset).name+'" />'
   )
   offset++;
});

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

Answer 1

По соображениям безопасности вы не можете генерировать input[type="file"] элементы с предопределенным значением. И все jQuery gobbledygook не помогут сделать это, потому что, вопреки распространенному заблуждению, jQuery построен на API DOM; jQuery - это оболочка для DOM API (крайне неэффективная и подверженная ошибкам), которая заменяет , а не .

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

Answer 2

Невозможно установить путь / значение в <input type="file">, который должен каким-либо образом сделать пользователь (щелкните по полю, перетащите + отпустите).

Это функция безопасности, которая предотвращает сценарии навеб-страница от взаимодействия с жестким диском пользователя.

Answer 3

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

$('input[type="file"]').on('change', function () {
    var output = [];
    for (var i = 0, len = this.files.length; i < len; i++) {
        output[output.length] =  this.files[i].name;
    }
    //output now stores an array of names of the files
});

Вот демоверсия: http://jsfiddle.net/7LuZM/

Я тестировал это только в Chrome 17. Я знаю, что multiple=true довольно новый, поэтому у вас, вероятно, возникнут большие проблемы с кросс-браузерностью (в спецификации HTML5): https://developer.mozilla.org/en/DOM/Input.multiple

Я нашел этот пост весьма полезным: http://davidwalsh.name/multiple-file-upload

Обновление

Вот структура, которую я нашел для свойства files элемента input[type="file"]:

FileList

    0: File
        fileName: "Airstream.zip"
        fileSize: 22891
        lastModifiedDate: Fri Dec 16 2011 14:36:31 GMT-0800 (Pacific Standard Time)
        name: "Airstream.zip"
        size: 22891
        type: "application/x-zip-compressed"
        webkitRelativePath: ""
        __proto__: File

    1: File
        fileName: "Animated-CSS3-Button-5.25.11.zip"
        fileSize: 7764
        lastModifiedDate: Fri Jan 06 2012 13:15:13 GMT-0800 (Pacific Standard Time)
        name: "Animated-CSS3-Button-5.25.11.zip"
        size: 7764
        type: "application/x-zip-compressed"
        webkitRelativePath: ""
        __proto__: File

    2: File
        fileName: "apache-ant-1.8.2-bin.zip"
        fileSize: 10920710
        lastModifiedDate: Fri May 13 2011 11:35:03 GMT-0700 (Pacific Daylight Time)
        name: "apache-ant-1.8.2-bin.zip"
        size: 10920710
        type: "application/x-zip-compressed"
        webkitRelativePath: ""
        __proto__: File

    length: 3
    __proto__: FileList