Question

我正在尝试创建一个人们可以发布内容的网站。目前，我正在尝试使用户可以按顺序添加文件并将其作为ajax中的多部分请求发送。但是，当我尝试上传文件时，我不断在chrome中获得连接重置错误。我必须重新登录服务器才能看到新文件。

HTML code：

<form id="postForm" method="post" enctype="multipart/form-data">
                        <textarea name="text" rows="4" cols="" class="form-control" placeholder="What's Up" id="postTextarea"></textarea>
                        <div class="radio">
                            <label><input type="radio" name="privacy" value="restricted" checked>Restricted</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="family" class="group">Family</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="bestie" class="group">Besties</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="friend" class="group">Friends</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="privacy" value="public">Public</label>
                        </div>
                        <br>
                        <div id="fileContainer">

                        </div>
                        <div id="buttonContainer">
                            <label class="btn btn-default" id="fileUploadButton">
                                Add Files<input type="file" name="file" class="fileInput" hidden multiple>
                            </label>
                            <button class="btn btn-primary" id="postButton">Post</button>
                        </div>
                    </form>

JavaScript的：

var submittedFileData = [] ;
$('.fileInput').on('change', function () {
        var files = $(this).prop('files') ;
        for (var i = 0; i < files.length; i++) {
            var p = document.createElement("p") ;
            $(p).text(files[i].name + " (Click here to remove file)") ;
            $(p).addClass("filename") ;
            $("#fileContainer").append(p) ;
            submittedFileData.push(files[i]);
        }
    });
$('#postButton').click(function () {
        var privacy = $( "input[type=radio][name=privacy]:checked" ).val();
        var formData = new FormData();
        //append privacy
        formData.append("privacy" , privacy) ;
        //append groups
        $( "input[type=checkbox][name=group]:checked" ).each(function(i) {
            formData.append("group" , $(this).val()) ;
        }) ;
        //append text
        formData.append("text" , $("#postTextarea").val()) ;
        //append files
        for (var i = 0; i < submittedFileData.length; i++) {
            formData.append("file" , submittedFileData[i]) ;
        }
        $.ajax({
            type: "POST",
            url: "post-upload",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            async : false,
            success: function (data) {
            },
            error: function (jqXHR, textStatus, errorThrown) {
               alert(errorThrown) ;
            }
        });
        $.post("feed-view","relation="+activeTab ,getXMLResponse) ;
    });

tomcat 9的server.xml

<Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
sslImplementationName="org.apache.tomcat.util.net.jsse.JSSEImplementation"
           maxThreads="150" SSLEnabled="true"
            scheme="https"
       secure="true" maxPostSize="-1" disableUploadTimeout="false" connectionUploadTimeout="600000">
    <SSLHostConfig>
        <Certificate certificateKeystoreFile="C:/Users/Kathavarayan/.keystore"
            certificateKeystorePassword=""
                     type="RSA" />
    </SSLHostConfig>
</Connector>

Answer 1

很可能没有任何代码方面的错误，而是服务器配置问题。

默认情况下，大多数服务器都设置为相当小的超时和相当小的上传大小限制。

这取决于您使用的服务器类型（nginx，Apache，Node / Express等）的默认值以及如何配置它们，但如果您的连接正在重置，这将是我首先考虑的问题或切断中上传。

Answer 2

我终于发现了这个问题。你可能不会相信这一点，但在一天结束时，表单中的按钮仍然导致它被提交，导致整个过程陷入困境。我所要做的就是在表单的按钮元素中添加type =“button”。现在，这可以防止提交表单，只会导致Ajax负责提交表单。

尝试将文件上载到tomcat服务器时，连接会不断重置

2 个答案: