js實現圖片上傳到伺服器和回顯
阿新 • • 發佈:2020-01-21
關於js實現圖片的上傳和回顯,曾經使用者的程式碼粘在這裡:
樣式:這樣寫樣式的道理是給<input>標籤的父級設定一個背景圖,就是‘+'那個背景圖,然後把<input>的寬高設定得跟父級一樣,且完全透明(注意是透明不是隱藏),這樣點選的時候看似是點選的‘+'的節點,其實點選的是<input>節點。
.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標籤:
<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>
實現imgPreview()方法: 這個方法是給$("#input_file")這個物件設定圖片的值並回顯圖片
function imgPreview(fileDom,i) { //判斷是否支援FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的裝置不支援圖片預覽功能,如需該功能請升級您的裝置!"); } //獲取檔案 var file = fileDom.files[0]; var imageType = /^image\//; //是否是圖片 if(!imageType.test(file.type)) { alert("請選擇圖片!"); return; } //讀取完成 reader.onload = function(e) { //圖片路徑設定為讀取的圖片 // 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請求 $.ajax({ type: "post",url: "介面地址",data: formdata,dataType: 'json',processData: false,// 告訴jQuery不要去處理髮送的資料 contentType: false,// 告訴jQuery不要去設定Content-Type請求頭 xhrFields:{withCredentials:true},async: true,//預設是true:非同步,false:同步。 success: function (data) { callback(data); },error: function (data) { layer.msg('請求異常'); },});
最終實現效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。