layui多圖檔上傳預覽删除_javascript簡單圖檔上傳預覽制作

第一步寫入input

.uploadWrap{ font-size: 14px; line-height: 24px; cursor: pointer; height: 36px; width: 118px; margin-right: 6px; margin-left: 28px; position: relative; } .ph08{ opacity: 0; //如果自定義上傳按鈕一般都會這樣設定 height: 36px; width: 118px; position: absolute; top: 0; left: 0; }  上傳海報 
           

第二步js擷取上傳圖檔路徑

//處理圖檔路徑function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }$("#file0").change(function(){ if (this.files && this.files[0]){ var filePath = $('#file0').val().toLowerCase().split("."); var fileType = filePath[filePath.length - 1]; //擷取圖檔格式 if(fileType=='zip'||fileType=='rar'||fileType=='html'){ alert("請上傳圖檔格式"); return false; } var objUrl = getObjectURL(this.files[0]); if(objUrl){ console.log(objUrl); $("#poster").css("background-image