html5 XMLHttpRequest 圖片異步上傳

字號(hào):


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <tilte>uploadFile</title>
    <script>
    function uploadFile(){
    var formData = new FormData();
    var files = document.getElementById('file').files;
    var file = files[0];
    formData.append('file',file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST','index.html',true);
    xhr.onload = function(e){
    if(this.status == 200){
    document.getElementById("resulte").innerHTML = this.response;
    }
    };
    xhr.send(formData);
    }
    </script>
    </head>
    <body>
    <form id="form1" enctype="multipart/form-data">
    <input type="file" id="file" name="file"><br/>
    <input type="button" value="upload" onclick="uploadFile();">
    </form>
    <output id="result"></output>
    </body>
    </html>