js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯

第js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯

關(guān)于js實(shí)現(xiàn)圖片的上傳和回顯，曾經(jīng)用戶的代碼粘在這里：

樣式：這樣寫樣式的道理是給input標(biāo)簽的父級(jí)設(shè)置一個(gè)背景圖，就是+那個(gè)背景圖，然后把input的寬高設(shè)置得跟父級(jí)一樣，且完全透明（注意是透明不是隱藏），這樣點(diǎn)擊的時(shí)候看似是點(diǎn)擊的+的節(jié)點(diǎn)，其實(shí)點(diǎn)擊的是input節(jié)點(diǎn)。

.file-box{

position:relative;

display:inline-block;

width:100px;

height:100px;

background:url(images/uploadPc.png)no-repeat;

background-size:100px100px;

#input_file{

width:100%;

height:100%;

opacity:0;

filter:alpha(opacity=0);

}

input標(biāo)簽：

div>

實(shí)現(xiàn)imgPreview()方法:這個(gè)方法是給$(#input_file)這個(gè)對象設(shè)置圖片的值并回顯圖片

functionimgPreview(fileDom,i){

//判斷是否支持FileReader

if(window.FileReader){

varreader=newFileReader();

}else{

alert(您的設(shè)備不支持圖片預(yù)覽功能，如需該功能請升級(jí)您的設(shè)備！

//獲取文件

varfile=fileDom.files[0];

varimageType=/^image\//;

//是否是圖片

if(!imageType.test(file.type)){

alert(請選擇圖片！

return;

//讀取完成

reader.onload=function(e){

//圖片路徑設(shè)置為讀取的圖片

//img.src=e.target.result;

console.log(document.getElementsByClassName(file-box

document.getElementsByClassName(file-box)[i].style.background=url(+e.target.result+)no-repeat//回顯圖片

document.getElementsByClassName(file-box)[i].style.backgroundSize=200px160px

console.log(reader,reader)

reader.readAsDataURL(file);

}

上傳部分的代碼：

varformData=newFormData();

formData.append(photo,$(#input_file)[0].files[0]);

//ajax請求

$.ajax({

type:post,

url:接口地址,

data:formdata,

dataType:json,

processData:false,//告訴jQuery不要去處理發(fā)送的數(shù)據(jù)

contentType:false,//告訴jQuery不要去設(shè)置Content-Type請求頭

xhrFields:{withCredentials:true},

async:true,//默認(rèn)是true：異步，false：同步。

success:function(data){

callback(data);

error:function(data)