使用java

Question

hello stackoverflow团队，我正在使用一个带有onclick函数的按钮，它调用ajax并且ajax在该按钮下的div中填充一个表单。在表单中有各种文本字段和一个input type=file现在我想使用ajax上传此文件并将数据并排上传到数据库。我可以使用ajax将数据上传到数据库，但我无法使用ajax上传文件。这是我的js代码

var selectedCategory = $("#category option:selected").val();
    var prod_name = $("#prod_name").val();
    var prod_code = $("#prod_code").val();
    var price = $("#price").val();
    var age = $("#age").val();
    var description = $("#description").val();
    var img_path = $("#image_path").val();
    var formValues = "&selectedCategory="+selectedCategory+
                    "&prod_name="+prod_name+
                    "&prod_code="+prod_code+
                    "&price="+price+
                    "&age="+age+
                    "&description="+description+
                    "&image_path="+img_path;
    alert(formValues);
    uploadData(formValues);
    $.ajax({
        url: "UploadFile",
        type: 'POST',
        data: img_path,
        success: function (data)
        {
            $("#panel_body").html(data);
            //showProducts();
        }
    });
}

这是我使用ajax调用我的servlet创建的表单：

<table cellpadding="5" cellspacing="5" style="margin: 0 auto;" id="add_record_table">
<form action="UploadImage" method="post" enctype="multipart/form-data"></form>
    <tbody><tr>
        <td><label>Select Category</label></td>
        <td>
           <select name="category" id="category"><option id="0" value="-1">--Select category--</option><option id="1" value="Alphabets and Numbers">Alphabets and Numbers</option></select>
        </td>
    </tr>
    <tr>
        <td>
            <label>Product Name</label>
        </td>
        <td>
            <input type="text" name="prod_name" id="prod_name" placeholder="Product Name">
        </td>
    </tr>
    <tr>
        <td>
            <label>Product Code</label>
        </td>
        <td>
            <input type="text" name="prod-code" id="prod_code" placeholder="Produce Code">
        </td>
    </tr>
    <tr>
        <td>
            <label>Price</label>
        </td>
        <td>
            <input type="text" name="price" id="price" placeholder="Price">
        </td>
    </tr>
    <tr>
        <td>
            <label>Recomended Age</label>
        </td>
        <td>
            <input type="text" name="age" id="age" placeholder="Recomended Age">
        </td>
    </tr>
    <tr>
        <td>
            <label>Description</label>
        </td>
        <td>
            <textarea id="description" rows="5" cols="50" placeholder="Description" style="resize: vertical; max-height: 250px;"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <label>Upload Image</label>
        </td>
        <td>
            <input type="file" name="image_path" id="image_path" accept="image/jpeg">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <input type="submit" name="submit" onclick="validateForm();" class="btn btn-primary btn-large" value="ADD" id="add_data">
        </td>
    </tr>

</tbody></table>

请帮助我解决这个问题。

Answer 1

您可以通过ajax上传文件，这是示例

var fileInput = document.getElementById（'image_path'）;

            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append('comprobante', file);

....以及所有更多数据：

            formData.append('age', age);

     ...data...

$。AJAX（{

                data: formData,
                url: 'UploadFile',
                type: 'post',
                processData: false,
                contentType: false,
                success:function (data)
    {
        $("#panel_body").html(data);
        //showProducts();
    }
});

然后你应该处理在后端上传的文件。