Ajax请求上传多文件的表单处理(jQuery)

在Ajax请求的时候无法直接获得文件内容,需要做一些特殊处理:

        var form = $(this).closest("form");

        //原始表单数据
        var formData = form.serializeArray();

        //Media 文件上传控件
        var media = form.find('input[name="images[]"]');

        var filesSelected = false;
        
        //最终表单数据
        var filesFormData = new FormData(); 

        media.each(function() {
            if (this.files.length > 0) {
                filesSelected = true;
                $.each(this.files, function(i, file) {
                    filesFormData.append('image' + i, file);
                });
            }
        });
        
            if (!filesSelected) {   //如果强制文件上传做一些处理
                window.alert(media.attr("data-validation-required-message"));
                return false;
            } else {
                //获取文件列表,这里不要用console.log()
                console.log("FormData:");
                filesFormData.forEach(function(value, key) {
                    console.log(key + ':', value);
                });
                
            }

            //将表单数据与文件数据合并
            $.each(formData, function(i, field) {
                filesFormData.append(field.name, field.value);
                //console.log(field.name + ' - ' + field.value);
            });

限制文件大小和上传类型

    $("input[name='images[]']").on("change", function(){
        
        var media = $(this);
        var maxSize = 1 * 1024 * 1024;
        var allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png'];
        $.each(this.files, function(i, file) {
            if (file.size > maxSize) {
                alert(media.attr("size-error-message"));
                media.val('');
                return;
            }

            if (!allowedTypes.includes(file.type)) {
                alert(media.attr("type-error-message"));
                media.val('');
                return;
            }
        });

    });

Post Comment