html5 上传图片

HTML5图片上传的实现方法

在网页开发中，图片上传是一个常见的功能，HTML5提供了一种简单的方式来实现这个功能，无需使用服务器端的语言，只需要使用HTML5的新特性就可以实现，下面将详细介绍如何使用HTML5实现图片上传。

我们需要创建一个表单，表单的enctype属性需要设置为"multipart/form-data"，这样才能上传文件，我们需要添加一个input元素，类型设置为"file"，这样就可以让用户选择要上传的文件了。

<form enctype="multipart/form-data">
  <input type="file" name="myFile">
  <input type="submit">
</form>

我们需要使用JavaScript来处理用户提交的表单，当用户点击提交按钮时，我们可以获取到用户选择的文件，然后使用FormData对象来存储这些文件，我们可以使用XMLHttpRequest对象来发送这些文件到服务器。

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);
});

在服务器端，我们需要设置一个接口来接收这些文件，这个接口需要设置Content-Type为"multipart/form-data"，这样才能接收到文件，我们可以使用request模块来接收这些文件，并将其保存到服务器上。

var express = require('express');
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })
var app = express()
app.post('/upload', upload.single('myFile'), function (req, res, next) {
  // req.file is the myFile file
  // req.body will hold the text fields, if there were any
})

以上就是使用HTML5实现图片上传的基本步骤，需要注意的是，由于安全原因，浏览器不允许直接访问用户的文件系统，所以我们无法直接获取用户选择的文件，通过上述方法，我们可以间接地获取到用户选择的文件，并将其发送到服务器。