Javascript & DHTML上传文件控件

下面是关于JavaScript & DHTML上传文件控件的完整攻略：

一、什么是JavaScript & DHTML上传文件控件

JavaScript & DHTML上传文件控件是一种用于在网页中实现上传文件功能的控件，通过该控件可以让用户在不离开网页的情况下上传本地文件到服务器。

二、如何使用JavaScript & DHTML上传文件控件

使用JavaScript & DHTML上传文件控件的过程分为以下几步：

1. 创建文件上传表单

在网页中创建一个文件上传表单，用于接收用户选择的本地文件。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

上述代码中，enctype 属性指定了上传的数据类型为二进制数据，method 属性指定了上传的方法为 POST。

2. 实现文件上传功能

JavaScript & DHTML上传文件控件可以使用 XMLHttpRequest 对象实现。在用户选择完本地文件后，使用 XMLHttpRequest 将文件上传到服务器。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(new FormData(document.querySelector('form')));

上述代码中，xhr.open() 方法指定了请求的方法和地址，xhr.setRequestHeader() 方法设置请求头，xhr.onreadystatechange 指定了状态变化后的回调函数，xhr.send() 方法上传表单数据。

3. 实现文件上传进度条

为了提升用户体验，一般情况下都会在界面中显示文件上传的进度。在 XMLHttpRequest 对象中，可以通过 onprogress 事件获取文件上传进度。

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percent = Math.round((e.loaded / e.total) * 100);
    console.log(percent + '%');
  }
};

上述代码中，xhr.upload.onprogress 指定了上传进度的回调函数，e.lengthComputable 属性用于判断上传进度是否可计算，e.loaded 和 e.total 属性用于获取已上传文件大小和总文件大小。

三、示例说明

下面给出两个示例，分别演示了如何使用JavaScript & DHTML上传文件控件实现文件上传和进度显示。

1. 文件上传

在网页中添加一个上传按钮，当用户点击该按钮时，弹出文件选择对话框，用户选择需要上传的文件后，将文件上传到服务器。

<input type="button" value="上传文件" onclick="upload()">

function upload() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload.php');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert(xhr.responseText);
    }
  };
  xhr.send(new FormData(document.querySelector('form')));
}

2. 文件上传进度显示

在网页中添加一个上传进度条，当用户选择上传文件后，显示上传进度。

<input type="file" name="file" id="file">
<input type="button" value="上传文件" onclick="uploadWithProgress()">
<progress value="0" max="100" id="progressBar"></progress>

function uploadWithProgress() {
  var file = document.getElementById('file').files[0];
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload.php');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percent = Math.round((e.loaded / e.total) * 100);
      document.getElementById('progressBar').value = percent;
    }
  };
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert(xhr.responseText);
    }
  };
  xhr.send(new FormData(document.querySelector('form')));
}

上述代码中，document.getElementById('file').files[0] 用于获取用户选择的文件，document.getElementById('progressBar').value 用于设置上传进度条的值。