JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法

JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法主要依赖于浏览器提供的File API。该API提供了File对象和FileReader对象，可以让我们通过JavaScript读取本地文件并进行上传。下面是实现该功能的步骤：

1. 在HTML页面中添加上传文件的表单元素，例如：

<form>
  <input type="file" id="fileInput">
  <button id="uploadBtn">上传</button>
</form>

1. 使用JavaScript获取文件输入框和上传按钮的元素：

const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');

1. 注册上传按钮的点击事件，获取选择的文件并进行上传处理：

uploadBtn.addEventListener('click', () => {
  const file = fileInput.files[0];
  const formData = new FormData();

  formData.append('file', file);

  // 发送上传请求并处理响应
});

在上面的代码中，我们首先获取到了选中的文件，然后使用FormData对象将文件添加到表单数据中。最后，我们可以使用AJAX等技术来发送请求，将表单数据上传到服务器，并在响应处理中获取上传成功后的结果。

以下是两个示例：

示例一：上传图片并显示预览

<form>
  <input type="file" id="fileInput">
  <button id="uploadBtn">上传</button>
</form>

<div id="preview"></div> <!-- 用于显示图片的容器 -->

<script>
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const preview = document.getElementById('preview');

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    preview.innerHTML = `<img src="${event.target.result}" alt="预览图">`;
  }

  reader.readAsDataURL(file);
}

fileInput.addEventListener('change', handleFileSelect);

uploadBtn.addEventListener('click', () => {
  const file = fileInput.files[0];
  const formData = new FormData();

  formData.append('file', file);

  // 发送表单数据到服务器进行上传
});
</script>

在上面的示例中，我们添加了一个显示预览图的容器，并在选择文件之后通过FileReader对象将图片文件读取为DataURL格式的Base64编码，从而显示在前端页面上。

示例二：判断上传文件的类型和大小

<form>
  <input type="file" id="fileInput">
  <button id="uploadBtn">上传</button>
</form>

<script>
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');

uploadBtn.addEventListener('click', () => {
  const file = fileInput.files[0];
  const formData = new FormData();

  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    alert('上传文件必须是JPEG或PNG格式的图片');
    return;
  }

  if (file.size > 10 * 1024 * 1024) {
    alert('上传文件大小不能超过10MB');
    return;
  }

  formData.append('file', file);

  // 发送表单数据到服务器进行上传
});
</script>

在上面的示例中，我们通过File对象的type属性和size属性判断上传的文件是否符合要求，如果不符合则弹出提示框并停止上传操作。其中，type属性表示上传文件的MIME类型，而size属性表示上传文件的大小（单位为字节）。