js：

if (window.File && window.FileReader && window.FileList && window.Blob){//Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。

    //全部支持

    function handleFileSelect(evt) {

        var files = evt.target.files, f = files[0];

            if (!/image\/\w+/.test(f.type)){

                 alert("请确保文件为图像类型");

                 return false;

            }

            var reader = new FileReader();

            reader.onload = (function(theFile) {

            return function(e) {

                var show_pic = document.getElementById("show_pic");

                show_pic.src = e.target.result;

            };

            })(f);

            reader.readAsDataURL(f);

    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);

    }else {

    alert('该浏览器不全部支持File APIs的功能');

}

html：

<input type="file" id="files" name="files[]" multiple="">

<img src="" id="show_pic">

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！