HTML 5 文件上传

H5 文件上传

  用H5进行文件上传主要解决了文件上传时显示进度条问题。跟其他方法相比，H5不需要从后台获取数据，提高了程序运行效率。

1. 首先先写一个上传文件的form表单

        <form id="form1" enctype="multipart/form-data" method="post" action="${urlPath}/upload/toUploadFile">
            <div class="row">
                <label for="fileToUpload">Select a File to Upload</label>
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />
            </div>
            <!-- 显示文件名 -->
            <div id="fileName"></div>
            <!-- 显示文件大小 -->
            <div id="fileSize"></div>
            <!-- 显示文件类型 -->
            <div id="fileType"></div>
            <!-- 如果是图片，进行预览 -->
            <div id="fileimg"></div>
            <div class="row">
                <input type="button" onclick="uploadFile()" value="Upload" />
            </div>
            <div id="progressNumber"></div>
            <input type="submit" value="提交" />
        </form>

form 表单中action路径要换成自己的接口进行提交。

2. js代码

     选择好文件以后，获取文件的信息

function fileSelected() {
                var file = document.getElementById('fileToUpload').files[0];
                alert(document.getElementById('fileToUpload').files[1]);
                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;
                    if(file.type.indexOf('image') != -1) { // 非常简单的交验
                        var s = document.getElementById('fileimg');

                        s.innerHTML = '';//清楚div里面的数据
                          var reader = new FileReader();
                          reader.onload = function(e) {
                          var img = new Image();
                          img.src = e.target.result; // 显示图片的地方 
                          s.appendChild(img);
                          };
                          //readAsDataURL   读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义，具体可以参考 
                          reader.readAsDataURL(file);
                }
                }
            }

通过ajax上传，addEventListener进行监听事件
Onloadstart 文件读取开始时触发。
Progress 当读取进行中时定时触发。事件参数中会含有已读取总数据量。
Abort 当读取被中止时触发。
Error 当读取出错时触发。
Load 当读取成功完成时触发。
Loadend 当读取完成时，无论成功或者失败都会触发。

            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", "${urlPath}/upload/parserUploadFile");//通过Post方法发送请求，路径改成自己上传文件的路径接口，
                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 */
                //我返回的是json数据，返回页面的话会直接弹出一个页面的源代码
                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.");
            }

完整的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传文件</title>
        <script type="text/javascript">
            function fileSelected() {
                var file = document.getElementById('fileToUpload').files[0];
                alert(document.getElementById('fileToUpload').files[1]);
                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;
                    if(file.type.indexOf('image') != -1) { // 非常简单的交验
                        var s = document.getElementById('fileimg');
                        s.innerHTML = '';
                          var reader = new FileReader();
                          reader.onload = function(e) {
                          var img = new Image();
                          img.src = e.target.result; // 显示图片的地方 
                          s.appendChild(img);
                          };
                          reader.readAsDataURL(file);
                }
                }
            }

            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", "${urlPath}/upload/parserUploadFile2");
                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);
                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>
    </head>
<!--  -->
    <body>
        <form id="form1" enctype="multipart/form-data" method="post" action="${urlPath}/upload/toUploadFileView3">
            <div class="row">
                <label for="fileToUpload">Select a File to Upload</label>
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />
            </div>
            <div id="fileName"></div>
            <div id="fileSize"></div>
            <div id="fileType"></div>
            <div id="fileimg"></div>
            <div class="row">
                <input type="button" onclick="uploadFile()" value="Upload" />
            </div>
            <div id="progressNumber"></div>
            <input type="submit" value="提交" />
        </form>

    </body>
</html>