Question

我正在尝试将数据发送到服务器，其中包含带有ajax的文件和字符串。我在jsp中的代码是：

<html>
...
<body>
...
    <form id="data" method="post" enctype="multipart/form-data">
        <input name="classroomID" type="hidden" value="1" />
        <input type="file" name="file" size="30" id="file" />
        <button>Submit</button>
    </form>

    <script type="text/javascript"
        src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
    <script type="text/javascript" src='sendUpload.js'></script>
...
</body>
</html>

我的sendUpload.js看起来像这样：

$(document).ready(function() {
    console.log("here");

    $("form#data").submit(function(ev){
        ev.preventDefault();
        console.log("Submitted");
        var formData = new FormData($(this)[0]);

        console.log(JSON.stringify(formData));

        $.ajax({
            url: "UploadServlet",
            type: 'POST',
            data: formData,
            success: function (data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });
});

但是JSON数据是空的。有什么建议？我正在使用java servlet。

Answer 1

你得到了什么样的错误？看起来你的jquery选择器是错误的，我试着改变它：

$("form#data").submit(function(ev){

对此：

$("#data").submit(function(ev){

虽然不太确定，但您应该发布特定的错误。

Answer 2

你可以这样做：

var formData = new FormData();
formData.append('classroomID', $('#classroomID').val());
formData.append('file', $('#file')[0].files[0]);

...并将您的课堂ID输入字段设为“课堂ID”。

此外，您无法直接从控制台检查formData，因此您必须使用它来进行调试：

for (var item of formData) {
    console.log(item);
}

Answer 3

＆＃13;

$(document).ready(function() {
    $("form#data").submit(function(e){
        e.preventDefault();

        $.ajax({
            url: "UploadServlet",
            type: 'POST',
            data: {
              classroomID: $('input[name="classroomID"]').val(),
              file: $('input[name="file"]').val()
            },
            success: function (data) {
                alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });
});

＆＃13;

它对你有用吗？

使用ajax发送文件和其他数据

3 个答案: