美化上傳檔案框(上傳圖片框)

阿新 • • 發佈：2019-01-14

//init
function initFile(fo){
var divFile = document.createElement("div");
divFile.className="file";
fo.parentNode.insertBefore(divFile,fo);
divFile.appendChild(fo);
var btnRemove = document.createElement("button");
btnRemove.className="remove";
btnRemove.innerHTML="移除";
divFile.insertBefore(btnRemove,fo);
var btnUpload = document.createElement("button");
btnUpload.className="upload";
btnUpload.innerHTML="上傳";
divFile.insertBefore(btnUpload,btnRemove);
var showImgTar = document.createElement("img");
showImgTar.setAttribute('src','images/nophoto.gif');
showImgTar.setAttribute('width','150');
showImgTar.setAttribute('height','150');
divFile.insertBefore(showImgTar,btnUpload);
}
var inputFiles = document.querySelectorAll("input[type='file']");
inputFiles.forEach(function(inf){
initFile(inf);
})
//file onload
var upload = document.querySelectorAll(".upload");
var file = document.querySelectorAll(".file");
file.forEach(function(f){
var showImg = f.querySelector("img");
var defImgSrc = "images/nophoto.gif";
var inpFile = f.querySelector("input[type='file']");
//移除
f.querySelector(".remove").onclick = function(){
showImg.src=defImgSrc;
inpFile.value="";
}
//上傳
f.querySelector(".upload").onclick = function(){
f.querySelector("input[type='file']").click();
}
inpFile.onchange = function(){
//判斷檔案型別
//console.dir(this.value);
var fileName = this.files[0].name;
var fileExt = fileName.split(".").pop().toLowerCase();
if(fileExt!='jpg' && fileExt!= 'gif' && fileExt!= 'png'){
alert("請上傳jpg,gif,png圖片");
this.value="";
return;
}
//判斷檔案大小
var fileSize = 1024 * 1024 * 2;
if(this.files[0].size>=fileSize){
alert("圖片大於2M,請重新選擇");
this.value="";
return;
}
//建立fileReader物件
var reader = new FileReader();
//圖片編碼完成
reader.onloadend = function(e){
showImg.src = e.target.result;
}
//解析圖片成base 64位的圖片用fileReader的readAsDataURL 去讀本地圖片物件
reader.readAsDataURL(this.files[0]);
}
})

美化上傳檔案框(上傳圖片框)

iOS上傳檔案或base64（圖片）之AFNetworking 3.0+上傳檔案上傳圖片

fastDFS中使用php上傳檔案 -- http上傳與下載圖片

[原創]K8 Struts2 Exp 20170310 S2-045(Struts2綜合漏洞利用工具) [原創]Struts2奇葩環境任意檔案上傳工具(解決菜刀無法傳檔案或上傳亂碼等問題)

[原創]Struts2奇葩環境任意檔案上傳工具(解決菜刀無法傳檔案或上傳亂碼等問題)

vue-resource+iview上傳檔案取消上傳

java 單個上傳檔案, 批量上傳檔案,單個下載,批量打成zip壓縮包下載檔案(如果不能接受httpsevletrequest請求的檔案可以使用MultipartFile[] files)

retrofit2 上傳進度回撥與 Interceptor衝突引起上傳檔案資料上傳兩次

h5特性formdata帶引數上傳檔案，上傳到node端

CKEditor+CKFinder for java (上傳檔案、上傳視訊、新增行距編輯等等)

美化上傳檔案框(上傳圖片框)

VUE彈框上傳圖片+預覽+壓縮圖片

java圖片上傳-檔案/圖片上傳到七牛

robot framework 遇到頁面彈出框上傳檔案時處理

layui上傳檔案、圖片

laravel圖片和檔案的上傳

前端上傳檔案前預覽，.net將base64位轉換為圖片並儲存到本地

阿里雲 javascript上傳檔案（圖片、視訊、壓縮包等檔案）到物件儲存 OSS ，返回上傳檔案、圖片、音訊、視訊等URL路徑

web安全_檔案上傳_Cknife操作_cmd製作圖片木馬

通過label點選觸發隱藏input:file上傳檔案或者圖片

SpringMVC上傳檔案（圖片）並儲存到本地

美化上傳檔案框(上傳圖片框)

相關推薦