html5异步上传图片显示上传文件进度条

浏览数：28 / 时间：2015年06月09日

<html>
    <head>

    </head>
    <body>
            <p>
    emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value=‘1‘>
</p>
<p>
    name:<input type="text" name="title" id="title">
</p>
            <div class="row">

                <label for="file">
                    Upload Image:</label>
                <input type="file" name="fileToUpload" id="fileToUpload"  multiple="multiple" onchange="fileSelected();" />
            </div>
SentenceMovie[photo]
            <div id="fileName">
            </div>
            <div id="fileSize">
            </div>
            <div id="fileType">
            </div> 
            <div id="progressNumber">
            </div>

        <script>
                    function fileSelected() {
                        var file = document.getElementById(‘fileToUpload‘).files[0];
                        if (file) {
                            var fileSize = 0;
                            if (file.size > 1024 * 1024)
                                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB‘;
                            else
                                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB‘;

                            document.getElementById(‘fileName‘).innerHTML = ‘Name: ‘ + file.name;
                            document.getElementById(‘fileSize‘).innerHTML = ‘Size: ‘ + fileSize;
                            document.getElementById(‘fileType‘).innerHTML = ‘Type: ‘ + file.type;
                            uploadFile();
                        }
                    }

                    function uploadFile() {
                        var fd = new FormData();
                        fd.append("upload_file", document.getElementById(‘fileToUpload‘).files[0]);
                        fd.append("emo_album_id", document.getElementById(‘emo_album_id‘).value);
                        fd.append("title", document.getElementById(‘title‘).value);
                        var xhr = new XMLHttpRequest();
                        xhr.upload.addEventListener("progress", uploadProgress, false);
                        xhr.addEventListener("load", uploadComplete, false);
                        xhr.addEventListener("error", uploadFailed, false);
                        xhr.addEventListener("abort", uploadCanceled, false);
                        xhr.open("POST", "http://mysae.com/emotions/1/api/index.php/emo/upload");
                        xhr.send(fd);
                    }

                    function uploadProgress(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                            document.getElementById(‘progressNumber‘).innerHTML = percentComplete.toString() + ‘%‘;
                        }
                        else {
                            document.getElementById(‘progressNumber‘).innerHTML = ‘unable to compute‘;
                        }
                    }

                    function uploadComplete(evt) {
                        /* This event is raised when the server send back a response */
                        alert(evt.target.responseText);
                    }

                    function uploadFailed(evt) {
                        alert("There was an error attempting to upload the file.");
                    }

                    function uploadCanceled(evt) {
                        alert("The upload has been canceled by the user or the browser dropped the connection.");
                    }
        </script>
    </body>
</html>