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


<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-->

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

$(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,以便我可以访问所有的文件内容以及我的其他属性相关的表单。在servlet中,我无法访问我的文件内容,也无法访问需要上传到数据库的其他表单属性。请提供解决方案给我。

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

希望这会有所帮助,因为你已经添加了相同的ajax调用,但它只会采取,如果它的形式有。

通常我使用ajaxSubmit API来处理表单数据到servlet或webservice,这会给你在保存或更新表单中列出的所有对象。

好运

请不要忘记使用

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

最新更新