自制的文件上传JS控件可支持IE、chrome、firefox etc

实现自制的文件上传JS控件，需要分为以下几个步骤：

第一步：定义HTML结构

首先，我们需要定义HTML结构，提供上传文件的按钮，显示上传进度的进度条以及文件选择框的位置。

<div id="upload-box">
  <input type="file" name="file" id="file-input">
  <button id="upload-button">上传文件</button>
  <div id="progress-bar">
    <div id="progress"></div>
  </div>
</div>

第二步：编写CSS样式

接着，我们需要编写CSS样式，美化上传按钮和进度条。

#upload-box {
  margin: 10px;
}

#file-input {
  display: none;
}

#upload-button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
}

#progress-bar {
  margin-top: 10px;
  width: 100%;
  height: 20px;
  background-color: #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
}

#progress {
  background-color: #4CAF50;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.5s;
}

第三步：编写JS代码

然后，我们需要编写JS代码，实现上传文件的功能，并显示上传进度。

function uploadFile() {
  var fileInput = document.getElementById("file-input");
  var file = fileInput.files[0];
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", function(event) {
    var percentage = Math.round((event.loaded / event.total) * 100);
    var progress = document.getElementById("progress");
    progress.style.width = percentage + "%";
  });
  xhr.open("POST", "//your-upload-url.com/upload");
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.send(file);
}

var uploadButton = document.getElementById("upload-button");
uploadButton.addEventListener("click", function() {
  var fileInput = document.getElementById("file-input");
  fileInput.click();
});

var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", function() {
  uploadFile();
});

示例说明一：支持IE8

为了让自制的文件上传JS控件支持IE8，我们可以使用ActiveXObject来代替XMLHttpRequest。

function createXMLHttpRequest() {
  if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined") {
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    throw new Error("XMLHttpRequest not supported");
  }
}

function uploadFile() {
  var fileInput = document.getElementById("file-input");
  var file = fileInput.files[0];
  var xhr = createXMLHttpRequest();
  xhr.upload.addEventListener("progress", function(event) {
    var percentage = Math.round((event.loaded / event.total) * 100);
    var progress = document.getElementById("progress");
    progress.style.width = percentage + "%";
  });
  xhr.open("POST", "//your-upload-url.com/upload");
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.send(file);
}

示例说明二：限制上传文件类型

为了限制上传文件类型，我们可以在文件选择框中设置accept属性，只允许选择指定类型的文件。

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

上面的代码表示只允许选择jpg、jpeg、png文件进行上传。同时，我们还需要在JS代码中进行判断，确保上传的文件类型符合要求。

function uploadFile() {
  var fileInput = document.getElementById("file-input");
  var file = fileInput.files[0];
  if (!/\.(jpg|jpeg|png)$/i.test(file.name)) {
    alert("只能上传jpg、jpeg、png格式的图片");
    return;
  }
  // 上传文件的代码
}

以上就是自制的文件上传JS控件的完整攻略。