```

```

该代码会在网页上生成一个默认样式的文件选择框。单击它将打开本地文件浏览器，然后用户就可以在其中选择上传的文件。

要限制文件类型或文件大小，可以使用一些input type file特定的HTML属性。在下面的示例中，将限制上传文件到图像文件类型和2MB大小：

```

```

其中，accept属性告诉浏览器只能选择图像文件，而size属性告诉浏览器上传文件最大大小为2MB。onchange属性将调用JavaScript函数validateImage()以验证用户选择的文件是否是有效的图像文件。

## 使用input type file上传图片的实现

input type file使用起来非常容易，但想要完全实现前端图片上传需要解决三个主要问题：

1. 验证用户选择的文件是否为合法的图像文件。

2. 将文件上传到服务器。

3. 接收并处理服务器返回的数据。

下面将详细介绍如何解决这三个问题。

### 验证用户选择的文件是否为合法的图像文件

如上所述，可以使用accept属性和JavaScript函数来验证用户选择的文件是否为合法的图像文件。以下是一个简单的JavaScript函数实现：

```

function validateImage() {

var fileInput = document.getElementById('fileUpload');

var filePath = fileInput.value;

var allowedExtensions = /(\.jpg|\.jpeg|\.webp|\.gif)$/i;

if (!allowedExtensions.exec(filePath)) {

alert('请选择有效的图像文件！支持jpg、jpeg、png和gif格式的文件');

fileInput.value = '';

return false;

}

}

```

在这个函数中，使用了正则表达式来验证 用户选择的文件名是否以.jpg、.jpeg、.webp或.gif结尾。如果文件名不满足这些条件，将提示一个警告框并要求用户重新选择文件。

### 将文件上传到服务器

实际上传文件到服务器需要向后端进行请求。一般我们通过ajax方式提交表单数据，其中包含由input type file上传的文件数据，来实现上传和发送数据的任务。

下面是一个上传图片的ajax请求实现：

```

function uploadImage() {

var fileInput = document.getElementById('fileUpload');

var file = fileInput.files[0];

var formData = new FormData();

formData.append('file', file);

$.ajax({

url: '/upload',

type: 'POST',

data: formData,

processData: false,

contentType: false,

success: function(response) {

// 处理上传成功的内容

},

error: function() {

// 处理上传失败的内容

}

});

}

```

该函数首先获取用户选择的文件，然后使用FormData对象创建一个包含该文件的表单数据。FormData对象是一个用于保存HTML表单数据的接口，使用该接口可以将文件上传到服务器的指定路径。formData.append()方法将数据追加到FormData中。

接下来，使用jQuery库的ajax()方法将所以选中的数据结合发送到后台。我们需要将type值设置为POST，因为图片上传是一项资源的创建操作。数据选项是创建的FormData实例，这样我们可以将文件和其他表单数据一并传输。processData和contentType选项均为false，这是因为它们被设置为false，则jQuery不会设置.ContentType头，从而不会转换数据。这使我们能够将FormData对象传递给服务器(要求为multipart/form-data)，同时避免对其进行"序列化"，进一步处理数据格式问题。

上传文件的时候也可以利用js编写进度条的代码，给用户良好的上传体验，下一节将介绍相关技术。

### 接收并处理服务器返回的数据

在收到服务器响应后，可以使用success()或error()回调处理它。服务器的响应数据通常是JSON格式，可以将这些数据用于更新网页上的回显信息或进行其它进一步的处理。

### 添加进度条

上述方式缺点是没有给用户上传的情况提供明显的反馈。实际上，您可以为此添加进度条。要添加进度条，调用XMLHttpRequest对象的XMLHttpRequest.upload.onprogress()事件完成上传进度的更新,并在progress回调中更新进度条的区域。

下面是一个跟踪上传进度的JavaScript代码：

```

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.onreadystatechange = uploadComplete;

function uploadProgress(event) {

if (event.lengthComputable) {

var percentComplete = Math.floor(event.loaded / event.total * 100);

document.getElementById("progressBar").style.width = percentComplete + '%';

}

}

function uploadComplete(event) {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

//处理上传成功的操作

} else {

//处理上传失败的操作

}

}

}

```

该代码首先创建XMLHttpRequest对象，使用XMLHttpRequest.upload.onprogress事件跟踪上传进度。Math.floor()函数可以将计算所得的百分比数据取整。上传完成后，如果服务器成功返回，将执行uploadComplete()函数处理响应。

## 总结

该方式给用户带来了前端图片上传的体验，并且只需要在前端实现即可。当然，实现前端图片上传还有很多种方式，这只是其中之一，您可以选择适合自己项目的方式。

HTML表单的input type file元素为我们解决了前端图片上传的问题，不管是简单还是高端的处理方式，都是基于这一元素的结果。它让上传文件这一核心需求变得非常简单，只需几行代码即可实现。