html上传头像 选择文件,HTML5上传图片文件（含拖拽、预览、上传、美化）

上篇文章讲了如何上传文件。本文讲细分讲述图片上传、预览等。

关于接口

File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。

FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或文件)。

Blob - 可将文件分割为字节范围。

FileReader - 读取File或Blob

URL scheme

检测浏览器是否支持

// 检测是否支持File API

if (window.File && window.FileReader && window.FileList && window.Blob) {

// 支持

} else {

alert('不支持');

}

基本代码

选取一张图片，并预览：

Demo1

.preview_box img {

width: 200px;

}

$("#img_input").on("change", function(e){

var file = e.target.files[0]; //获取图片资源

// 只选择图片文件

if (!file.type.match('image.*')) {

return false;

}