Question

这似乎是一个非常常见的问题，我认为我已经搜索过最后一个问题，但我无法完全使用我的代码。

尝试通过AJAX将文件上传到服务器。我可以看到浏览器发出POST请求但是我回到了通常的Flask 400（嘿，我找不到那个键）错误。

HTML

echo "<form id=\"pcapUpload\" class=\"form-horizontal\" method=\"post\" enctype=\"multipart/form-data\">";
echo "<div class=\"form-group\">";
echo "<label for=\"pcapInput\" class=\"control-label col-xs-2\">Select PCAP File</label>";
echo "<div class=\"col-xs-3\">";
echo "<div class=\"input-group\">";                        
echo "<input type=\"file\" id=\"uploadPcapFile\" name=\"uploadPcapFile\"></input>";
echo "</div>";
echo "</div>";   
echo "</div>";

echo "<br>";
echo "<div class=\"form-group\">";
echo "<div class=\"col-xs-offset-2 col-xs-3\">";
echo "<input type=\"submit\" value=\"Sumbmit\">";
echo "</div>";
echo "</div>";
echo "</form>";

使用Javascript：

    $("#pcapUpload").submit(function(event) {

        event.preventDefault();
        event.stopPropagation();

        var form = $(this);
        var file = document.getElementById("uploadPcapFile");
        var data = new FormData();

        var onerror = function(event) {
            alert("An error occoured!");
        }
        var onprogressupdate = function(event) {

            if(event.lengthComputable) {

                var percent = event.loaded / event.total * 100;

                $("#progress").html(percent+"%");

            }

        }
        var onreadystatechange = function(event) {

            if(request.status == 200 && request.readyState == 4) {

                alert("Uploaded!");

                $("#progress").hide();
                $("#progress").html("");

            }
            else {
                alert("Alternative state and/or status");
                console.log("state: " + request.state); 
                console.log("readyState: " + request.readyState);
            }

        }

        for(var i = 0; i < file.files.length; i++)
            data.append('uploadPcapFile[]', file.files[i]);

        $("#progress").show();
        $("#progress").html("Uploading files...");

        var request = new XMLHttpRequest();

        request.upload.addEventListener("error", onerror);
        request.upload.addEventListener("progress", onprogressupdate);
        request.upload.addEventListener("readystatechange", onreadystatechange);

        request.open("post", "/url/goes/here/");
        request.setRequestHeader("Content-type", "multipart/form-data");
        request.send(data);

    });

烧瓶代码：

@app.route('/url/goes/here/', methods=['POST'])
def uploadPcap():
    try:
        #Get the name of the uploaded pcap
        uploadedFile = request.files['uploadPcapFile[]']
        #DO STUFF HERE
    except Exception, e:
        return jsonify({'error': str(e)})

每次我得到以下作为回复。

"error": "400: Bad Request"

接头：

**General**
Remote Address:
Request URL:
Request Method:POST
Status Code:200 OK

**Response Headers**
Connection:Keep-Alive
Content-Length:33
Content-Type:application/json
Date:Wed, 03 Jun 2015 02:16:57 GMT
Keep-Alive:timeout=5, max=100
Server:Werkzeug/0.10.4 Python/2.7.6

**Request Headers**
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:259711
Content-type:multipart/form-data
Cookie:PHPSESSID=esgdrqomu3cmnt71jqpaidgjv4
Host:
Origin:
Referer:
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.81 Safari/537.36

**Request Payload**
------WebKitFormBoundary7xbZfNt0ORl9BaPe
Content-Disposition: form-data; name="uploadPcapFile[]"; filename="something.pdf"
Content-Type: application/pdf


------WebKitFormBoundary7xbZfNt0ORl9BaPe--

Flask AJAX POST文件上传无效

0 个答案: