Question

我一直在尝试使用Ajax上传文件，但FormData始终为空。

这是我用来的代码：

<html>
<head>
<link rel="stylesheet" href="../website/css/bootstrap.min.css">
</head>
<body>
    <form id="providerForm">
        <input id="fileI" class="form-control" name="fileI" type="file" />
        <button id="newProviderButton" type="submit" class="btn btn-success"
            value="Enviar">Enviar</button>
    </form>
</body>
<script type="text/javascript"
    src="https://code.jquery.com/jquery-latest.min.js"></script>
<script
    src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script
    src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script>
    var providerId = "";
    function newProvider() {

        var a = $("#providerForm")[0];
        var b = $("#providerForm");
        var c = new FormData($(b)[0]);
        var d = document.getElementById('providerForm');
        var dataT = new FormData(d);
        var params = $('#providerForm').serializeArray();
        c.append("file",$($(a).find("#fileI"))[0]); 
        $.each(params, function(i, val) {
            dataT.append(val.name, val.value);
            console.log(val.name + ": " + val.value);
        });
        $.ajax({
                    type : "POST",
                    beforeSend : function(request) {
                        request.setRequestHeader("Content-Type",
                                "multipart/form-data");
                    },
                    url : "../services/user/profile/upload/image",
                    data : dataT,
                    cache : false,
                    contentType : false,
                    processData : false,
                    success : function(msg) {
                        if (msg.message == "OK") {
                            mAlert({
                                container : $("#providerForm"),
                                message : 'Usuario registrado correctamente',
                                type : 'success',
                                okButton : 'OK'
                            });
                        }
                    },
                    statusCode : {
                        401 : function() {
                            window.location.replace("../entrance.jsp");
                        }
                    }
                });

    }
    $(document).ready(function() {
        $("#providerForm").on('reset',function(){
            $(this).data('formValidation').resetForm(true);
        });
         $('#providerForm').formValidation({
                framework: 'bootstrap',

                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {}
            })
         .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                var $form = $(e.target),
                    fv    = $(e.target).data('formValidation');

                // Do whatever you want here ...

                // Then submit the form as usual
                newProvider();
                //fv.defaultSubmit();
            });
    });
</script>
</html>

您可以在此处查看结果。

正如你所看到的，我尝试通过不同的方法获取HTMLElement，甚至单独附加元素结果id FormData = {}

编辑：

我需要multipart/form-data格式

的FormData编码

Answer 1

上传文件的最佳方式不是Ajax，但如果你想这样做，你可以按照属于的教程：

http://blog.teamtreehouse.com/uploading-files-ajax

上传文件的最佳方式是传统方法，使用enctype="multipart/form-data"刷新网站的表单非常简单，但最好的方法就是这样做。

此致

Answer 2

如果您使用的是jQuery（已标记），请尝试使用form.serialize()代替$ .each dataT追加。

FormData（）表单元素始终为空

2 个答案: