JS实现上传文件显示进度条

JS实现上传文件显示进度条的完整攻略：

HTML部分

首先要有一个文件上传表单，可通过以下代码添加：

<form name="form1" method="post" enctype="multipart/form-data" action="upload.php">
      <input type="file" name="file" id="file"/>
      <input type="button" value="上传" id="upload"/>
</form>

其中，需要指定表单的提交方式为POST，同时设置表单的enctype属性为multipart/form-data，可支持文件上传，form1是表单的名称，file是文件上传的input的name属性。

JS部分

通过JS代码实现文件上传，进度条等效果。可参考以下示例：

function upload() {
      var file = document.getElementById("file");
      //获取文件对象

      var xhr = new XMLHttpRequest();
      //创建异步请求对象

      var fd = new FormData();
      fd.append("file", file.files[0]);
      //把要上传的文件添加到表单数据中

      xhr.upload.addEventListener("progress", uploadProgress, false);
      //监听上传进度事件

      xhr.addEventListener("load", uploadComplete, false);
      //监听上传完成事件

      xhr.addEventListener("error", uploadFailed, false);
      //监听上传失败事件

      xhr.addEventListener("abort", uploadCanceled, false);
      //监听上传取消事件

      xhr.open("POST", "upload.php");
      //打开异步请求对象的连接

      xhr.send(fd);
      //发送表单数据
}

function uploadProgress(evt) {
      if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            //文件上传进度计算

            document.getElementById("progress").innerHTML = percentComplete.toString() + "%";
            //显示文件上传进度百分比
      }
      else {
            document.getElementById("progress").innerHTML = "上传失败";
      }
}

function uploadComplete(evt) {
      alert("文件上传成功！");
}

function uploadFailed(evt) {
      alert("文件上传失败！");
}

function uploadCanceled(evt) {
      alert("文件上传已取消！");
}

document.getElementById("upload").addEventListener("click", upload, false);
//给上传按钮添加点击事件监听器

以上JS代码实现了文件的上传功能，并且在上传过程中实现了进度条的显示。

CSS部分

为文件上传进度条添加样式，可参考以下代码：

.progress-bar {
      width: 100%;
      height: 30px;
      border: 1px solid #ffffff;
      position: relative;
      margin-top: 10px;
      margin-bottom: 10px;
      background-color: #f8f8f8;
      overflow: hidden;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
}

.progress {
      height: 100%;
      color: #ffffff;
      text-align: right;
      line-height: 30px;
      background-color: #23ade5;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
      -webkit-transition: width 0.3s ease;
      -moz-transition: width 0.3s ease;
      transition: width 0.3s ease;
}

以上CSS样式实现了进度条的基本样式。

示例：

示例1：通过以上代码实现文件上传功能后，可参考以下示例1进行测试。

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>文件上传测试</title>
            <style>
                  .progress-bar {
                        width: 100%;
                        height: 30px;
                        border: 1px solid #ffffff;
                        position: relative;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        background-color: #f8f8f8;
                        overflow: hidden;
                        -moz-border-radius: 4px;
                        -webkit-border-radius: 4px;
                        border-radius: 4px;
                  }

                  .progress {
                        height: 100%;
                        color: #ffffff;
                        text-align: right;
                        line-height: 30px;
                        background-color: #23ade5;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        z-index: 1;
                        -webkit-transition: width 0.3s ease;
                        -moz-transition: width 0.3s ease;
                        transition: width 0.3s ease;
                  }
            </style>
      </head>

      <body>
            <form name="form1" method="post" enctype="multipart/form-data" action="upload.php">
                  <input type="file" name="file" id="file"/>
                  <input type="button" value="上传" id="upload"/>
            </form>
            <div class="progress-bar">
                  <div id="progress" class="progress" style="width: 0%;"></div>
            </div>
            <script>
                  function upload() {
                        var file = document.getElementById("file");

                        var xhr = new XMLHttpRequest();

                        var fd = new FormData();
                        fd.append("file", file.files[0]);

                        xhr.upload.addEventListener("progress", uploadProgress, false);

                        xhr.addEventListener("load", uploadComplete, false);

                        xhr.addEventListener("error", uploadFailed, false);

                        xhr.addEventListener("abort", uploadCanceled, false);

                        xhr.open("POST", "upload.php");

                        xhr.send(fd);
                  }

                  function uploadProgress(evt) {
                        if (evt.lengthComputable) {
                              var percentComplete = Math.round(evt.loaded * 100 / evt.total);

                              document.getElementById("progress").style.width = percentComplete.toString() + "%";

                              document.getElementById("progress").innerHTML = percentComplete.toString() + "%";
                        }
                        else {
                              document.getElementById("progress").innerHTML = "上传失败";
                        }
                  }

                  function uploadComplete(evt) {
                        alert("文件上传成功！");
                  }

                  function uploadFailed(evt) {
                        alert("文件上传失败！");
                  }

                  function uploadCanceled(evt) {
                        alert("文件上传已取消！");
                  }

                  document.getElementById("upload").addEventListener("click", upload, false);
            </script>
      </body>
</html>

示例2：如果在单个页面上需多次实现文件上传和进度条效果，可通过以下示例2进行测试实现：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>文件上传测试多次实现</title>
            <style>
                  .progress-bar {
                        width: 100%;
                        height: 30px;
                        border: 1px solid #ffffff;
                        position: relative;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        background-color: #f8f8f8;
                        overflow: hidden;
                        -moz-border-radius: 4px;
                        -webkit-border-radius: 4px;
                        border-radius: 4px;
                  }

                  .progress {
                        height: 100%;
                        color: #ffffff;
                        text-align: right;
                        line-height: 30px;
                        background-color: #23ade5;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        z-index: 1;
                        -webkit-transition: width 0.3s ease;
                        -moz-transition: width 0.3s ease;
                        transition: width 0.3s ease;
                  }
            </style>
            <script>
                  function upload(id) {
                        var file = document.getElementById("file_" + id);

                        var xhr = new XMLHttpRequest();

                        var fd = new FormData();
                        fd.append("file", file.files[0]);

                        xhr.upload.addEventListener("progress", function (evt) {
                              uploadProgress(evt, id);
                        }, false);

                        xhr.addEventListener("load", function (evt) {
                              uploadComplete(evt, id);
                        }, false);

                        xhr.addEventListener("error", function (evt) {
                              uploadFailed(evt, id);
                        }, false);

                        xhr.addEventListener("abort", function (evt) {
                              uploadCanceled(evt, id);
                        }, false);

                        xhr.open("POST", "upload.php");

                        xhr.send(fd);
                  }

                  function uploadProgress(evt, id) {
                        if (evt.lengthComputable) {
                              var percentComplete = Math.round(evt.loaded * 100 / evt.total);

                              document.getElementById("progress_" + id).style.width = percentComplete.toString() + "%";

                              document.getElementById("progress_" + id).innerHTML = percentComplete.toString() + "%";
                        }
                        else {
                              document.getElementById("progress_" + id).innerHTML = "上传失败";
                        }
                  }

                  function uploadComplete(evt, id) {
                        alert("文件上传成功！");
                  }

                  function uploadFailed(evt, id) {
                        alert("文件上传失败！");
                  }

                  function uploadCanceled(evt, id) {
                        alert("文件上传已取消！");
                  }

                  function add() {
                        var newDiv = document.createElement("div");
                        //创建新的div

                        newDiv.innerHTML = "<input type='file' name='file_" + id + "' id='file_" + id + "'/><input type='button' value='上传' onclick='upload(" + id + ")'/><div class='progress-bar'><div id='progress_" + id + "' class='progress' style='width: 0%;'></div></div>";
                        //设置新的div的innerHTML

                        document.body.appendChild(newDiv);
                        //把新的div添加到页面中

                        id++;
                        //id自增
                  }

                  var id = 1;
                  //初始化id为1

                  window.onload = function () {
                        document.getElementById("add").addEventListener("click", add, false);
                        //给添加按钮添加点击事件监听器
                  }
                  //在页面加载完成后执行
            </script>
      </head>

      <body>
            <input type="button" value="添加" id="add"/>
      </body>
</html>

以上是JS实现上传文件显示进度条的完整攻略，通过以上代码可实现文件的上传和进度条的显示效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现上传文件显示进度条 - Python技术站