您好,登錄后才能下訂單哦!
這篇文章主要介紹了js如何實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
關(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:100px 100px; } #input_file{ width:100%; height:100%; opacity: 0; filter:alpha(opacity=0); }
input標(biāo)簽:
<div class="file-box"> <input type="file" value="" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="imgPreview(this,0)" > </div>
實(shí)現(xiàn)imgPreview()方法: 這個(gè)方法是給$("#input_file")這個(gè)對(duì)象設(shè)置圖片的值并回顯圖片
function imgPreview(fileDom,i) { //判斷是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的設(shè)備不支持圖片預(yù)覽功能,如需該功能請(qǐng)升級(jí)您的設(shè)備!"); } //獲取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是圖片 if(!imageType.test(file.type)) { alert("請(qǐng)選擇圖片!"); 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 = '200px 160px'; console.log('reader',reader) }; reader.readAsDataURL(file); }
上傳部分的代碼:
var formData = new FormData(); formData.append('photo', $('#input_file')[0].files[0]); //ajax請(qǐng)求 $.ajax({ type: "post", url: "接口地址", data: formdata, dataType: 'json', processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù) contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭 xhrFields:{withCredentials:true}, async: true, //默認(rèn)是true:異步,false:同步。 success: function (data) { callback(data); }, error: function (data) { layer.msg('請(qǐng)求異常'); }, });
最終實(shí)現(xiàn)效果:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js如何實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。