Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

让我们来详细讲解一下“Javascript DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例”这篇文章。

让我们来详细讲解一下“Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例”这篇文章。

概述

本篇文章主要介绍如何使用Javascript实现上传文件控件，以及如何使用DHTML实现文件上传进度条和阻止默认行为等功能。

实现文件上传控件

文件上传控件，即，是HTML表单中常用的一种控件。通过Javascript可以控制文件上传控件的属性，例如显示文件类型、是否允许多选等。

<input type="file" id="uploadFile" name="uploadFile" accept=".jpg,.jpeg,.png" multiple="multiple">

可以通过上述代码创建一个文件上传控件，其中accept属性指定只允许上传.jpg、.jpeg和.png格式的图片，multiple属性指定允许多选。

实现文件上传进度条

在文件上传时，我们希望能够显示上传进度条，以方便用户了解上传进度。可以借助DHTML技术，实现一个简单的文件上传进度条。

<div id="progressBox" style="display:none;width:300px;height:20px;border:1px solid #ccc;">
  <div id="progressBar" style="width:0%;height:100%;background-color:#66ccff;"></div>
</div>

<script>
function uploadFile(){
  var fileEle = document.getElementById("uploadFile");
  var file = fileEle.files[0];
  if(file){
    var xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(evt){
      var percent = evt.loaded / evt.total * 100;
      document.getElementById("progressBox").style.display = "block";
      document.getElementById("progressBar").style.width = percent + "%";
    };
    xhr.open("POST", "/file/upload");
    xhr.send(new FormData().append("file", file));
  }
}
</script>

上述代码实现了一个带有上传进度条的文件上传控件，其中progressBox用于显示进度条，progressBar用于显示进度条进度。在文件上传时，通过XMLHttpRequest对象的upload.onprogress事件监听进度变化，实时更新进度条显示。

阻止默认行为

在文件上传时，我们也希望防止页面跳转或者刷新，这可以通过阻止默认行为来实现。例如，在点击“上传”按钮时，禁止表单提交，通过Javascript实现文件上传。

<form action="/file/upload" method="POST">
  <input type="file" id="uploadFile" name="uploadFile" accept=".jpg,.jpeg,.png" multiple="multiple">
  <button type="submit" onclick="return false;">上传</button>
</form>

<script>
document.querySelector("form").addEventListener("submit", function(evt){
  evt.preventDefault();
  uploadFile();
});
</script>

上述代码实现了禁止表单提交，通过Javascript实现上传文件的功能。在点击“上传”按钮时，通过addEventListener方法监听submit事件，使用preventDefault方法阻止默认行为，然后调用uploadFile函数实现文件上传。

以上是“Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例”的完整攻略，希望对你有所帮助。