怎么进行文件上传？分享HTML文件上传的10个小技巧

1. HTML文件上传的目的

文件上传是一种常见的网络功能，它允许用户将自己的文件上传到网站服务器中，以便进行共享和分享。HTML文件上传是基于HTML表单的文件上传，它是一种通过浏览器上传文件的方式，既简单易用，又方便快捷。

2. HTML文件上传的基本原理

HTML文件上传基于HTML表单，通过表单中的input标签的type属性设置为file来实现。上传文件时，用户通过浏览器从本地选择文件，然后将文件传输到服务器。服务器接收到文件后进行处理，最终将文件存储在指定的位置上。

2.1 input标签中的type属性

type属性指定了input标签的类型，常用的类型包括text、password、radio、checkbox等。而对于文件上传，我们需要将type设置为file。

<input type="file" name="file-upload">

2.2 form标签中的enctype属性

enctype属性用于设置表单提交时所使用的编码类型。对于文件上传，我们需要使用multipart/form-data编码类型，将表单中各个字段的值分别用boundary隔开，最后将文件的二进制数据加入到表单的末尾。代码如下：

<form method="post" action="upload.php" enctype="multipart/form-data">

  <input type="file" name="file-upload">
  <input type="submit" value="上传文件">
</form>

2.3 服务器端代码

服务器端代码负责接收上传的文件并进行处理。常用的服务器端语言有PHP、Java、Python等。下面以PHP为例，演示如何接收上传的文件：

$file = $_FILES["file-upload"];

$temp_path = $file["tmp_name"];
$dest_path = "./uploads/" . $file["name"];
move_uploaded_file($temp_path, $dest_path);

3. HTML文件上传的小技巧

3.1 设置input标签的accept属性

通过设置accept属性可以限制用户只能上传指定类型的文件。代码如下：

<input type="file" accept=".jpg,.png,.gif" name="file-upload">

3.2 设置input标签的multiple属性

通过设置multiple属性可以允许用户一次上传多个文件。代码如下：

<input type="file" multiple name="file-upload">

3.3 显示文件上传进度

通过JavaScript代码可以实时显示文件上传进度。代码如下：

<progress value="0" max="100"></progress>

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    var progress = document.querySelector('progress');
    progress.value = Math.round(percentComplete * 100);
  }
};

3.4 预览图片

通过JavaScript代码可以实现上传图片时自动预览图片。代码如下：

<input type="file" accept=".jpg,.png,.gif" onchange="previewImage(this)">

function previewImage(input) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    var img = document.querySelector('img');
    img.src = evt.target.result;
  };
  reader.readAsDataURL(input.files[0]);
}

3.5 限制上传文件的大小

通过JavaScript代码可以限制上传文件的大小，防止用户上传过大的文件。代码如下：

<input type="file" onchange="checkFileSize(this)">

function checkFileSize(input) {
  var fileSize = input.files[0].size / 1024 / 1024;
  if (fileSize > 2) {
    alert("文件大小不能超过2MB！");
    input.value = "";
  }
}

3.6 限制上传文件的数量

通过JavaScript代码可以限制上传文件的数量，防止用户一次上传太多的文件。代码如下：

<input type="file" onchange="checkFileCount(this)" multiple>

function checkFileCount(input) {
  if (input.files.length > 5) {
    alert("一次最多上传5个文件！");
    input.value = "";
  }
}

3.7 自定义上传按钮的样式

通过CSS代码可以自定义上传按钮的样式，让上传界面更美观。代码如下：

<label class="upload-button">

  <input type="file" name="file-upload">
  <span>选择文件</span>
</label>
.upload-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #337ab7;
  color: #fff;
  cursor: pointer;
}
.upload-button input[type=file] {
  display: none;
}
.upload-button span {
  display: inline-block;
  margin-left: 8px;
}

3.8 上传文件前进行文件类型和大小的预检查

通过JavaScript代码可以在上传文件前进行文件类型和大小的预检查，可以减轻服务器的压力。代码如下：

<form onsubmit="return checkUpload(this)">

  <input type="file" name="file-upload">
  <button type="submit">上传文件</button>
</form>
function checkUpload(form) {
  var file = form["file-upload"].files[0];
  if (!file) {
    alert("请选择要上传的文件！");
    return false;
  }
  var fileType = file.type.toLowerCase();
  if (fileType != "image/jpeg" && fileType != "image/png" && fileType != "image/gif") {
    alert("只能上传jpg、png、gif类型的文件！");
    return false;
  }
  var fileSize = file.size / 1024 / 1024;
  if (fileSize > 2) {
    alert("文件大小不能超过2MB！");
    return false;
  }
  return true;
}

3.9 显示上传文件的缩略图

通过JavaScript代码可以显示上传文件的缩略图，让用户更方便地预览文件。代码如下：

<div class="item">

  <input type="file" onchange="previewFile(this)">
  <img class="thumbnail">
</div>
function previewFile(input) {
  var file = input.files[0];
  if (file) {
    var reader = new FileReader();
    reader.onload = function(evt) {
      var thumbnail = input.parentNode.querySelector('.thumbnail');
      thumbnail.src = evt.target.result;
    };
    reader.readAsDataURL(file);
  }
}

3.10 压缩上传图片

通过JavaScript代码可以在上传图片前将图片进行压缩，减小图片文件的大小，从而减轻服务器的负担。代码如下：

<input type="file" onchange="compressImage(this)">

function compressImage(input) {
  var file = input.files[0];
  if (file) {
    var reader = new FileReader();
    reader.onload = function(evt) {
      var img = new Image();
      img.src = evt.target.result;
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var max_width = 800;
        var max_height = 600;
        var width = img.width;
        var height = img.height;
        if (width > height) {
          if (width > max_width) {
            height *= max_width / width;
            width = max_width;
          }
        } else {
          if (height > max_height) {
            width *= max_height / height;
            height = max_height;
          }
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        var data = canvas.toDataURL(file.type);
        var compress_file = dataURLtoFile(data, file.name);
        var form = input.parentNode.parentNode;
        var formData = new FormData(form);
        formData.append('file-upload', compress_file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload');
        xhr.send(formData);
      };
    };
    reader.readAsDataURL(file);
  }
}
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type:mime});
}

4. 总结

HTML文件上传是一种常见的网络功能，它通过HTML表单实现，让用户可以方便快捷地上传自己的文件。本文介绍了HTML文件上传的基本原理，并分享了10个实用的小技巧，包括设置文件类型和大小的限制、预览图片、显示上传进度、自定义上传按钮样式等。