html5+javascript实现简单上传的注意细节

当我们需要在网站中添加文件上传功能时，可以使用HTML5和JavaScript来实现。但是在实现过程中，需要注意一些细节才能确保上传功能的稳定性和安全性。以下是实现简单上传的注意细节攻略：

HTML5中的文件上传

HTML5通过 input 标签的 type="file" 属性提供了文件上传功能。以下是HTML5文件上传的注意事项：

1.设定合适的 accept 属性

<input type="file" accept=".jpg, .png, .pdf">

accept 属性可以限制文件上传者只能上传指定类型的文件。这可以降低网站被上传恶意文件的风险。请注意，用户仍然可以更改上传文件的文件类型并上传非法文件，所以请使用后端程序进行文件类型验证。

2.禁用 multiple 属性

<input type="file" multiple>

multiple 属性允许用户上传多个文件，但这也可能导致出现非法文件。建议禁用 multiple 属性，用户只能上传一个文件。

3.设置最大文件大小

<input type="file" max-size="5242880">

max-size 属性可用于限制文件的最大大小。上面的示例限制上传文件的最大大小为5MB，这可以降低网站因过大的文件上传导致的性能问题。

JavaScript中的文件上传

JavaScript可以通过 XMLHttpRequest 和 FormData 对象向服务器发送文件。以下是使用JavaScript上传文件的注意事项：

1.创建一个新的 FormData 对象

var formData = new FormData();

FormData 对象用于存储要上传的文件和其他表单元素的数据。可以使用 append 方法向表单中添加更多数据。

2.发送 XMLHttpRequest 请求

var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/upload', true);
xhr.send(formData);

XMLHttpRequest 对象用于将数据发送到服务器。使用 open 方法指定请求类型、URL和异步请求标志，然后使用 send 方法将数据发送到服务器。

3.添加事件处理程序

xhr.addEventListener('load', function() {
  // 处理响应数据
});

添加 load 事件处理程序以处理服务器响应。在事件处理程序中，可以使用 responseText 或 responseJSON 属性获取响应的内容。

4.处理上传进度

xhr.upload.addEventListener('progress', function(event) {
  // 处理上传进度
});

添加 progress 事件处理程序以处理上传进度。event 参数包含有关当前上传进度的详细信息。

以下是JavaScript上传文件的示例代码：

<!-- HTML -->
<input type="file" id="file-input">
<button id="upload-button">上传</button>
<div id="progress-bar"></div>
<div id="upload-message"></div>

// JavaScript
var fileInput = document.getElementById('file-input');
var uploadButton = document.getElementById('upload-button');
var progressBar = document.getElementById('progress-bar');
var uploadMessage = document.getElementById('upload-message');

uploadButton.addEventListener('click', function() {
  var formData = new FormData();
  formData.append('file', fileInput.files[0]);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/path/to/upload', true);
  xhr.upload.addEventListener('progress', function(event) {
    var percent = Math.round((event.loaded / event.total) * 100);
    progressBar.style.width = percent + '%';
    progressBar.innerText = percent + '%';
  });
  xhr.addEventListener('load', function() {
    uploadMessage.innerText = '上传成功！';
  });
  xhr.send(formData);
});

这段代码会在点击上传按钮时发送一个文件到服务器，并显示一个进度条和一个上传消息。当上传完成时，上传消息会显示 "上传成功！"。