`
dcj3sjt126com
  • 浏览: 1829660 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5上传文件显示进度

    博客分类：
  • PHP
 
阅读更多

下面我们使用Html 5的新特性file api实现上传文件，并显示上传文件进度百分比。意图是这样的，当选择文件时，显示当前文件信息。这里我们是结合Asp.net MVC做为服务端，您也可以是其它的服务端语言。让我们看面这个片断的HTML：

<html>
    <head>

    </head>
    <body>

            <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("fileToUpload", document.getElementById('fileToUpload').files[0]);
                        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", "testupload.php");
                        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>

 图片上传，由于在SAE平台，简单实现代码如下：

$name = $_FILES['fileToUpload']['tmp_name'];
$s = new SaeStorage();
$s->upload( 'xhprof' , 'a.jpg' , $name );
 echo "上传完成";

 

分享到：
| IOS开发之──获得设备类型和系统版本号
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics