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：

總結

以上是生活随笔為你收集整理的html单张图片效果,jquery+html5实现单张图片上传预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。