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

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


person Geshan    schedule 27.05.2009    source источник
comment
Возможно, какой-нибудь код, показывающий, что вы делали раньше и что вы пытаетесь сделать сейчас, поможет...   -  person Cᴏʀʏ    schedule 27.05.2009


Ответы (5)


Проведя несколько минут в 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.

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

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

Удачи.

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

  1. Загрузка файлов на W3C
  2. Сериализация форм, Гаррет Смит, 2007 г.
  3. Исходный код прототипа 1.6.1RC3 (строка 3967: Form.serializeElements начинается )
person Sampson    schedule 25.06.2009
comment
Если вы используете jQuery 1.6 (или более позднюю версию), вам нужно использовать .prop(), а не .attr(). - person davidchambers; 15.09.2011

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

person anewcomer    schedule 13.03.2012

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

Посетите http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html

person Community    schedule 27.07.2009

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

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

    (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()
person Adam Jimenez    schedule 09.03.2012
comment
Забавно, что вы только что опубликовали это, поскольку я искал решение. Мне нравится ваш метод, но, как вы сказали на jquery.com, он сериализует только имя файла. Как вы предлагаете размещать данные файла через ajax? - person bigmac; 10.03.2012
comment
Вы не можете отправлять данные файла с помощью ajax. Вы можете опубликовать форму в iframe. Наличие только имени файла полезно для проверки формы. - person Adam Jimenez; 10.03.2012
comment
Мой комментарий выше больше недействителен - вы можете использовать файл API для сохранения данных через ajax. - person Adam Jimenez; 30.04.2019

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

person burghard.britzke    schedule 30.11.2010