js上傳圖片預覽，php後臺接收例項，已改寫為多圖上傳預覽
阿新 • • 發佈：2019-01-30
上傳圖片預覽這個出自超實用的js程式碼段，關於圖片的處理那一章，php後臺接收是網上比較少這方面的資源或者寫得很複雜，這裡簡單記錄。都是基於js
首先先呼叫兩個資料夾animateManage.js和viewimg.js，可以在網上下載。相當好用。
關鍵點是FileReader這個知識點，可以讀取檔案的相關資訊，包括路徑。這是個關鍵點。
/* * 呼叫FileReader 檔案API的readAsDataURL，啟動非同步載入檔案的資料，通過監聽reade的onload事件， * 等待資料載入完畢後，在回撥函式onload事件中，通過reader的result屬性即可獲得圖片檔案的相關內容 * */ var reader = new FileReader(), _file = this.files[0]; //讀取被載入的檔案物件 reader.onload = (function(file) { //監聽load事件 return function() { options.previewImgSrc.setAttribute("src", this.result); options.previewImgSrc.style.display = "block"; }; })(_file); reader.onerror = function(){//監聽檔案讀取的錯誤處理 alert("檔案讀取資料出錯"); } reader.readAsDataURL(_file);//讀取檔案內容···
注意，這是單張圖片的預覽。
接下來是後臺
我用的是ajax來傳給後臺，其實ajax網上太多資料關於傳檔案了，其實沒那麼複雜，很簡潔。
關鍵點在FormData這個物件。#add_goods_info這個是from的id
$("#add_btn").click(function() { var formData = new FormData($("#add_goods_info")[0]); $.ajax({ type: "post", //data:$("#add_goods_info").serialize(), data: formData, contentType: false, processData: false, url:"<?php echo site_url("gallery/update");?>", dataType:"json", success:function(data){ alert(data); } }) });
php後臺按正常接收即可，抄w3c的例子也可以。
if (file_exists('./uploads/source/head/'.date('Y/m/d'))) { $address = 'uploads/source/head/'.date('Y/m/d'); if (!file_exists($address. $_FILES["head_img"]["name"])) { move_uploaded_file($_FILES["head_img"]["tmp_name"],"$address"."/".$_FILES["head_img"]["name"]); $where=array( 'original_img'=>"$address"."/".$_FILES["head_img"]["name"] ); $this->gallery_model->update($goods_id,$where); } } else { mkdir('./uploads/source/head/'.date('Y/m/d'), 0777,true); $address = 'uploads/source/head/'.date('Y/m/d'); if (!file_exists($address. $_FILES["head_img"]["name"])) { move_uploaded_file($_FILES["head_img"]["tmp_name"],"$address"."/".$_FILES["head_img"]["name"]); $where=array( 'original_img'=>"$address"."/".$_FILES["head_img"]["name"] ); $this->gallery_model->update($goods_id,$where); } }
因為在js那裡，書籍的高手已經做了詳細的資訊過濾，這裡可根據自由做擴充套件驗證。
最新個人修改，支援多圖預覽，關鍵單在於這次獲取的是getElementsByName，然後通過陣列來處理FileReader，同樣有每行程式碼解析
upPreviewImgLong = function(options){//帶引數進來
//console.log(options);//兩個物件
//alert(options.previewImgSrc[1]);//一開始載入的是object HTMLImageElement;
//alert(options.e[0]);
var _e = options.e[0],//通過按鈕來觸發事件，可以通過for迴圈來處理，但是一直存在問題，為了事務流，暫時寫實數量
_s = options.e[1],
_k = options.e[2],
preloadImg = null;
for (var i =0;i<options.e.length; i++) {
_e.onchange = function(){//按鈕點選事件
var _v = this.value,
_body = document.body;
picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//圖片正則
if(!picReg.test(_v)){//簡單的圖片格式驗證，這個可以實裝
alert("請選擇正確的圖片格式");
return false;
}
//支援FileReader，現在瀏覽器都行了吧，要做這種效果，主要起效都在FileReader的物件中做手腳
//取消不不支援FileReader的平穩退化，優化可讀性
/*
* 呼叫FileReader 檔案API的readAsDataURL，啟動非同步載入檔案的資料，通過監聽reade的onload事件，
* 等待資料載入完畢後，在回撥函式onload事件中，通過reader的result屬性即可獲得圖片檔案的相關內容
* */
var reader = new FileReader(),
_file = this.files[0]; //讀取被載入的檔案物件,這個是files物件，不是指定圖片的陣列下標
reader.onload = (function(file) { //監聽load事件
return function() {
//alert(this.result);
options.previewImgSrc[0].setAttribute("src", this.result);//options.previewImgSrc[]的下標才是上傳圖片name的陣列下標
options.previewImgSrc[0].style.display = "block";
options.previewImgSrc[0].style.width = "200px";
options.previewImgSrc[0].style.height = "200px";
};
})(_file);
reader.onerror = function(){//監聽檔案讀取的錯誤處理
alert("檔案讀取資料出錯");
}
reader.readAsDataURL(_file);//讀取檔案內容···
}
_s.onchange = function(){//按鈕點選事件
var _v = this.value,
_body = document.body;
picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//圖片正則
if(!picReg.test(_v)){//簡單的圖片格式驗證，這個可以實裝
alert("請選擇正確的圖片格式");
return false;
}
//支援FileReader，現在瀏覽器都行了吧，要做這種效果，主要起效都在FileReader的物件中做手腳
/*
* 呼叫FileReader 檔案API的readAsDataURL，啟動非同步載入檔案的資料，通過監聽reade的onload事件，
* 等待資料載入完畢後，在回撥函式onload事件中，通過reader的result屬性即可獲得圖片檔案的相關內容
* */
var reader = new FileReader(),
_file = this.files[0]; //讀取被載入的檔案物件
reader.onload = (function(file) { //監聽load事件
return function() {
//alert(this.result);
options.previewImgSrc[1].setAttribute("src", this.result);
options.previewImgSrc[1].style.display = "block";
options.previewImgSrc[1].style.width = "200px";
options.previewImgSrc[1].style.height = "200px";
};
})(_file);
reader.onerror = function(){//監聽檔案讀取的錯誤處理
alert("檔案讀取資料出錯");
}
reader.readAsDataURL(_file);//讀取檔案內容···
}
_k.onchange = function(){//按鈕點選事件
var _v = this.value,
_body = document.body;
picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//圖片正則
if(!picReg.test(_v)){//簡單的圖片格式驗證，這個可以實裝
alert("請選擇正確的圖片格式");
return false;
}
//支援FileReader，現在瀏覽器都行了吧，要做這種效果，主要起效都在FileReader的物件中做手腳
/*
* 呼叫FileReader 檔案API的readAsDataURL，啟動非同步載入檔案的資料，通過監聽reade的onload事件，
* 等待資料載入完畢後，在回撥函式onload事件中，通過reader的result屬性即可獲得圖片檔案的相關內容
* */
var reader = new FileReader(),
_file = this.files[0]; //讀取被載入的檔案物件
reader.onload = (function(file) { //監聽load事件
return function() {
//alert(this.result);
options.previewImgSrc[2].setAttribute("src", this.result);
options.previewImgSrc[2].style.display = "block";
options.previewImgSrc[2].style.width = "200px";
options.previewImgSrc[2].style.height = "200px";
};
})(_file);
reader.onerror = function(){//監聽檔案讀取的錯誤處理
alert("檔案讀取資料出錯");
}
reader.readAsDataURL(_file);//讀取檔案內容···
}
}
};
function addImg(buttonName,imgName){
upPreviewImgLong({//圖片預覽上傳,呼叫函式
"e":document.getElementsByName(buttonName),//這個是按鈕name名
"previewImgSrc":document.getElementsByName(imgName)//這個是圖片name名
})
};
var add_longimgs=document.getElementById("add_longimgs");
add_longimgs.onclick=function(){
var goods_longimgs_num=document.getElementsByName("goods_longimgs[]");
if (goods_longimgs_num.length <= 2) {
addLong();
imgName="longs[]";
buttonName="goods_longimgs[]";
addImg(buttonName,imgName);
}else{
alert("為了上傳速度的保證，請一次最多上傳三張");
};
};
var add_imgs=document.getElementById("add_imgs");
add_imgs.onclick=function(){
var goods_longimgs_num=document.getElementsByName("goods_imgs[]");
if (goods_longimgs_num.length <= 2) {
addImgs();
imgName="imgs[]";
buttonName="goods_imgs[]";
addImg(buttonName,imgName);
}else{
alert("為了上傳速度的保證，請一次最多上傳三張");
};
};