如何使用jquery和servlet将文件与其他表单属性一起上载到数据库

时间:2015-09-30 09:52:18

标签: jquery html ajax servlets

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 40%;">
            <!-- Modal content-->
            <div class="modal-content">
                <!-- Modal Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel4">Tender Documents</h4>
                </div>
                <!-- Modal Body-->
                <div class="modal-body">
                    <div class="panel-body">

                        <form id="fileinfo" name="fileinfo"  method="post">

                            <div>
                                <label>Upload File</label><br /> <input type="file" name="file"
                                    size="50" id="file">
                            </div>

                            <div class="form-group">
                                <label>Document Serial No</label><br /> <input type="text"
                                    name="serialNo" id="dSerialNo" class="form-control input-sm"
                                    placeholder="Serial No" required="required">
                            </div>
                            <div class="form-group">
                                <label>Attach Name</label><br /> <input type="text"
                                    name="attachName" id="dAttachName"
                                    class="form-control input-sm" placeholder="Attach Name"
                                    required="required">
                            </div>
                            <div class="form-group">
                                <label>Description</label> <input type="text" id="dDesc"
                                    name="dDescription" />
                            </div>

                            <!-- Modal Footer -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal" id="uploaddocument">Submit</button>
                                <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Modal Body-->

            </div>
            <!-- Modal content-->
        </div>
    </div>
    <!-- Modal 4-->

上面的代码片段是我的Form,其中包含一个表单,用于上传文件,它还包含一些属性。

$(document).on('click','#uploaddocument', function(){
        alert("uploaddocument");
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("label", "WEBUPLOAD");
        var file=$('#file');
        console.log(file);
        var id=$('.selected').attr('id');
        alert(id);
        var obj={};
        obj.id=id;
        obj.file=$('#file').val();
        obj.serialNo=($('#dSerialNo').val()).toString();
        obj.attachName=$('#dAttachName').val();
        obj.udescription=$('#dDesc').val();

        $.ajax({
            url: '/OtherApplication/upload.do?id='+id,
            type: 'POST',
            dataType: 'json',
            enctype: 'multipart/form-data',
            processData: false,  
            contentType: false ,  
            data: JSON.stringify(obj),
            success: function( data, textStatus, jqXHR) {
                alert("Success");
                console.log(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log("Something really bad happened " + textStatus);
            }
        });

    });

上面的代码片段是我的jquery-ajax调用如何将我的所有表单数据发送到servlet,这样我就可以访问所有文件内容以及与form相关的其他属性。在servlet中我不能访问我的文件内容还有其他需要上传到数据库的表单属性。请给我解决方案。 提前谢谢。

1 个答案:

答案 0 :(得分:0)

首先,您需要在表单标记中添加enctype =“multipart / form-data”作为属性。

希望这会有所帮助,因为你在ajax调用中添加了相同内容,但只有当它形成时才会有。

通常我使用ajaxSubmit API来处理表单数据到servlet或webservice,它将为你提供保存或更新时在表单中列出的所有对象。

祝你好运

请不要忘记使用

 <form id="data" method="post" enctype="multipart/form-data">.