Как мне сериализовать ввод типа файла в jquery

Question

Ранее с помощью Prototype я мог сериализовать файл типа ввода, он дал мне имя файла загружаемого файла, но когда я сериализовал форму в jquery, я просто получил текст ввода типа, а другие не файл, как мне это сделать

Answer 1

Проведя несколько минут в Firebug, кажется, есть несколько способов сделать это. Например, я смог получить список файлов из самого fileObject:

var file = $("#control").attr("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;

alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

Ясно, что я могу прочитать значения для сериализации. Но письмо - это еще одна проблема.

Но, очевидно, это не так просто, как утверждают другие. Я взял на себя смелость загрузить исходный код Prototype и не смог узнать, где находятся инструкции по использованию данных FileList для объекта File Upload.

На самом деле я нашел в Интернете статью, в которой каталогизировались проблемы с сериализацией самого объекта выгрузки файлов, утверждая, что ни одна библиотека AJAX не справилась с этой задачей (обратите внимание, это было написано в 2007 году). Хотя эта тема интересна, и, похоже, вы сможете использовать любое количество методов для извлечения данных из файла загрузки - сама спецификация содержит достаточно информации, чтобы направить вас по этому пути.

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

Удачи.

Соответствующая документация:

1. Загрузка файла на W3C
2. Сериализация формы Гарреттом Смитом, 2007
3. Прототип 1.6.1RC3 Источник (строка 3967: начинается Form.serializeElements)

Answer 2

Как уже упоминалось, вы можете отправить форму, содержащую входные данные из файла, через ajax, но это требует некоторого волшебства iframe. Если вы не возражаете против использования jQuery, я настоятельно рекомендую функцию ajaxSubmit плагина jquery.forms .

Answer 3

Соответствующая ошибка jQuery: http://bugs.jquery.com/ticket/2656

Я добавил свой собственный метод serializeAll вместо serialize:

    (function($) { 
    $.fn.serializeAll = function() {
        var rselectTextarea = /^(?:select|textarea)/i;
        var rinput = /^(?:color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|search|tel|text|time|url|week)$/i;
        var rCRLF = /\r?\n/g;

        var arr = this.map(function(){
            return this.elements ? jQuery.makeArray( this.elements ) : this;
        })
        .filter(function(){
            return this.name && !this.disabled &&
                ( this.checked || rselectTextarea.test( this.nodeName ) ||
                    rinput.test( this.type ) );
        })
        .map(function( i, elem ){
            var val = jQuery( this ).val();

            return val == null ?
                null :
                jQuery.isArray( val ) ?
                    jQuery.map( val, function( val, i ){
                        return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                    }) :
                    { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
        }).get();

        return $.param(arr);
    }
})(jQuery);

Тогда звоните:

$('#form').serializeAll()

Answer 4

Это новая функция в FireFox 3.

Выезд http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html

Answer 5

В источнике Prototype (указан выше) serializeElements различает "element.type! = 'File'" и другие. Тип элемента "файл" не сериализован.