html5讀取本機檔案範例程式碼_html5教學技巧

html結構樣式如下：

複製代碼

代碼如下:

新增圖片

從樣式上說您應不顯示input元素的輸入框，這時需將input設定為透明樣式，然後將其覆蓋到button元素上方，這時方可實現點擊button上傳圖片。將accepted設定為“image/*”，則只允許圖片類別檔案上傳。

Css樣式如下

複製代碼

代碼如下:

.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background:
. scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
opacity: 0;
position: absolute;
right: 00 ;
top: 0;

z-index: 10;
}

js代碼

複製程式碼

程式碼如下:


function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invaild");
return;
}
for(var i=0, file; file=files[i]; i ){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc;
imgele.onload=function(){
$("#showlogo ").attr("src",this.src);
}

}
}

複製程式碼

程式碼如下:


$(document).ready(function(){
$("#logoimg").change(function(ee ){

readFiles(e) }); });