<input type="file" name="pic" id="pic" onchange="preview(this)">
<div id="pics"></div>
function preview(file){
//file.files:代表選擇的文件, 以數(shù)組形式存在
console.log(file.files[0]);
if (file.files && file.files[0])
{
var src = file.files[0].name; //得到文件名
// aaa.JPG
var position = src.lastIndexOf("."); //最后一個(gè)點(diǎn)出現(xiàn)的位置
var ext = src.substr(position); //得到文件的擴(kuò)展名
var type = ext.toLowerCase(); //將擴(kuò)展名轉(zhuǎn)換為小寫
var all = [".jpg",".gif",".jpeg",".png"];
if(all.indexOf(type) == -1) //查詢type是否在數(shù)組中, 不在的話返回 -1
{
alert("您上傳圖片的類型不符合(.jpg|.jpeg|.gif|.png)!"); return false;
}
var reader = new FileReader();
//將文件以Data URL形式讀入頁(yè)面
reader.readAsDataURL(file.files[0]);
//onload 成功讀取
reader.onload = function(){
$("#pics").html('<img src="' + this.result + '" id="imgs"/>').children("img").css({"max-width":"150px"});
}
}
}