0

Andy Olsen (lynda.com および video2brain) によるコース「HTML 5 Power」の「クロス オリジン アップロード」の例を試しています。

アップロードできましたが、サーバーに「サーバーへのアップロードが完了しました」と表示されます。しかし、ファイルはサーバー上にありません。なんで ？

助けてくれてありがとう。

サーバーコンソールにあるものは次のとおりです。

c:\cou>C:\python27\python CORSServer.py 9999
Serving HTTP on 0.0.0.0 port 9999 ...
127.0.0.1 - - [24/Sep/2013 10:40:28] "GET /CrossOriginUpload.html HTTP/1.1" 200
-
Received an OPTIONS request.
127.0.0.1 - - [24/Sep/2013 10:40:43] "OPTIONS /upload HTTP/1.1" 200 -
Received a POST request.
Read POST data
127.0.0.1 - - [24/Sep/2013 10:40:50] "POST /upload HTTP/1.1" 200 -
Upload to server complete

ファイル CORSServer.py :

#!/usr/bin/python

import BaseHTTPServer
from SimpleHTTPServer import SimpleHTTPRequestHandler

class CORSRequestHandler(SimpleHTTPRequestHandler):
    def do_POST(self):
        print "Received a POST request."
        content_length = int(self.headers['Content-length'])
        bytes_read = 0
        while bytes_read < content_length:
            x = self.rfile.read(1)
            bytes_read += 1
        print "Read POST data"

        message = "Upload to server complete"

        self.send_response(200)

        self.send_header("Access-Control-Allow-Origin", "http://mydomain1:9999")
        self.send_header("Content-Length", str(len(message)))
        self.send_header("Content-Type", "text/plain");
        self.end_headers()

        print message
        self.wfile.write(message);

    def do_OPTIONS(self):
        print "Received an OPTIONS request."
        self.send_response(200)
        self.send_header("Access-Control-Allow-Origin", "http://mydomain1:9999")
        self.send_header("Access-Control-Allow-Methods", "POST")
        self.end_headers()

if __name__ == "__main__":
    BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)

そして CrossOriginUpload.html :

<!DOCTYPE html>
<head>
    <title>Uploading Data</title>

    <style>
        body {
            font-family: Arial, Verdana;
        }
    </style>

    <script>
//cross-origin requests
        // Global variables.
        var targetLocation = "http://localhost:9999/upload";
        var messageAreaElem;
        var progressBarElem;

        // Handles the "Start Upload" button click.
        function doStartUpload() {

            progressBarElem.value = 0;
            messageAreaElem.innerHTML = "";

            // Get the file selected by the user.
            var fileElem = document.getElementById("file");
            if (fileElem.files.length == 0) {
                messageAreaElem.innerHTML = "You must select a file to upload first";

            } else {
                messageAreaElem.innerHTML = "Opening file...";

                // Start reading the file into memory.
                var reader = new FileReader();
                reader.onloadend = doUpload;
                reader.readAsArrayBuffer(fileElem.files[0]);
            }
        }

        // Handles the "file loaded into memory" event.
        function doUpload(e) {

            messageAreaElem.innerHTML = "Uploading file to server...";

            // Create an XMLHttpRequest object.
            var xhr = new XMLHttpRequest();

            // Handle "upload progress" events on the XMLHttpRequest object.
            xhr.upload.onprogress = function(e) {
                var percentUploaded = Math.floor(100 * e.loaded / e.total);
                progressBarElem.value = percentUploaded;
                messageAreaElem.innerHTML = percentUploaded + "% uploaded";
            }

            // Handle "download progress" events on the XMLHttpRequest object.
            xhr.onprogress = function(e) {
                var percentDownloaded = Math.floor(100 * e.loaded / e.total);
                progressBarElem.value = percentDownloaded;
                messageAreaElem.innerHTML = percentDownloaded + "% downloaded";
            }

            // Handle "Finished upload/download" events on the XMLHttpRequest object.
            xhr.onload = function(e) {
                messageAreaElem.innerHTML = "Finished";
            }

            // Handle "Error" events on the XMLHttpRequest object.
            xhr.onerror = function(e) {
                messageAreaElem.innerHTML = "Error occurred";
            }

            // Upload the file data asynchronously to the server, using the XMLHttpRequest object.
            xhr.open("POST", targetLocation, true);
            xhr.send(e.target.result);
        }

        // Performs page initialization.
        function onLoad() {
            document.getElementById("startUpload").addEventListener("click", doStartUpload, true);     
            messageAreaElem = document.getElementById("messageArea");
            progressBarElem = document.getElementById("progressBar");
        }

        window.addEventListener("load", onLoad, true);

    </script>

</head>
<body>

    <h1>Ajax Uploads</h1>

    <input type="file" id="file"/> <br/>
    <button id="startUpload">Start Upload</button> <br/><br/>

    <progress id="progressBar" value="0" max="100"></progress> 
    <span id="messageArea"></span>

</body>
</html>
4

1 に答える 1

1

このループは、アップロードされたデータを読み取って破棄します。

    while bytes_read < content_length:
        x = self.rfile.read(1)
        bytes_read += 1
于 2013-09-24T15:09:46.510 に答える