使用html5 FileReader獲取圖片，并異步上傳到服務器(not iframe)

body{margin: 0px; background:#f2f2f0;}

p{margin:0px;}

.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}

.file{position:absolute; width:100%; font-size:90px;}

.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}

.filebtn:hover{background:#04bc0d;}

.showimg{margin:10px auto 10px auto; text-align:center;}

window.onload = function(){

// 選擇圖片

document.getElementById(‘img’).onchange = function(){

var img = event.target.files[0];

// 判斷是否圖片

if(!img){

return ;

}

// 判斷圖片格式

if(!(img.type.indexOf(‘image’)==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){

alert(‘圖片只能是jpg,gif,png’);

return ;

}

var reader = new FileReader();

reader.readAsDataURL(img);

reader.onload = function(e){ // reader onload start

// ajax 上傳圖片

$.post(“server.php”, { img: e.target.result},function(ret){

if(ret.img!=”){

alert(‘上傳圖片成功！’);

$(‘#showimg’).html(‘’);

}else{

alert(‘上傳圖片失敗了’);

}

},’json’);

} // reader onload end

}

}

使用html5 FileReader獲取圖片，并異步上傳到服務器(not iframe)

請選擇圖片

總結

以上是生活随笔為你收集整理的html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...的全部內容，希望文章能夠幫你解決所遇到的問題。

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