input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括(推薦)
本篇對(duì)input file進(jìn)行了修改,改成自己需要的樣式,類似驗(yàn)證身份上傳身份證圖片的功能。
效果圖如下:
這里主要展示上傳預(yù)覽圖片功能,對(duì)于刪除功能的html及css寫(xiě)的比較粗糙,對(duì)于想要精細(xì)表現(xiàn)這塊兒的可以在自己添加修改。
<!--點(diǎn)擊預(yù)覽圖片--> <div class="picDiv"> <div class="addImages"> <!--multiple屬性可選擇多個(gè)圖片上傳--> <input type="file" class="file" id="fileInput" multiple accept="image/png, image/jpeg, image/gif, image/jpg" /> <div class="text-detail"> <span>+</span> <p>點(diǎn)擊上傳</p> </div> </div> </div>
這里需要注意下:如果在input file 標(biāo)簽里寫(xiě)成accept=“image/*”會(huì)造成點(diǎn)擊按鈕后等待時(shí)間稍長(zhǎng)才會(huì)彈出選擇文件框,所以寫(xiě)成
accept="image/png, image/jpeg, image/gif, image/jpg"
css代碼
.imageDiv{ display: inline-block; width: 140px; height: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px dashed darkgray; background: #f8f8f8; position: relative; overflow: hidden; } .cover{ position: absolute; z-index: 1; top: 0; left: 0; width: 140px; height: 125px; background-color: rgba(0,0,0,.3); display: none; line-height: 125px; text-align: center; cursor: pointer; } .cover>.delbtn{ color: red; font-size: 20px; } .imageDiv:hover .cover{ display: block; } .addImages{ display: inline-block; width: 140px; height: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px dashed darkgray; background: #f8f8f8; position: relative; overflow: hidden; } .text-detail{ margin-top: 40px; text-align: center; } .text-detail>span{ font-size: 40px; } .file{ position: absolute; top: 0; left: 0; width: 140px; height: 125px; opacity: 0; }
里邊的加號(hào)或者刪除字樣都可以用成字體或者圖片,看自己公司需要。
javascript代碼
第一種方式:createObjectURL
//圖片上傳預(yù)覽功能 var userAgent = navigator.userAgent;//用于判斷瀏覽器類型 $(".file").change(function () { //獲取選擇圖片的對(duì)象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的圖片文件 var fileList = docObj.files; //循環(huán)遍歷 for (var i = 0; i < fileList.length; i++) { //動(dòng)態(tài)添加html元素 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>" picDiv.prepend(picHtml); //獲取圖片imgi的對(duì)象 var imgObjPreview = document.getElementById("img"+fileList[i].name); if (fileList && fileList[i]) { //圖片屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要以下方式 if(userAgent.indexOf('MSIE') == -1){//IE以外瀏覽器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //獲取上傳圖片文件的物理路徑 }else{//IE瀏覽器 if(docObj.value.indexOf(",")!=-1){ var srcArr=docObj.value.split(","); imgObjPreview.src = srcArr[i]; }else{ imgObjPreview.src = docObj.value; } } } } }); /*刪除功能*/ $(document).on("click",".delbtn",function () { console.log("click") var _this=$(this); _this.parents(".imageDiv").remove(); });
這里有瀏覽器判斷,因?yàn)镮E和谷歌,火狐等瀏覽器不同,后兩者對(duì)于文件路徑有瀏覽器保護(hù),不會(huì)顯示全文件路徑,而IE瀏覽器則沒(méi)有,它完整的顯示了文件路徑,下圖可看出。
谷歌瀏覽器:
IE瀏覽器:
還有另外一種方式,通過(guò)filereader方式預(yù)覽圖片。
JavaScript代碼
第二種方式:filereader
$(".file").change(function () { //獲取選擇圖片的對(duì)象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的圖片文件 var fileList = docObj.files; for(var i=0;i<fileList.length;i++){ var fr = new FileReader(); var single=fileList[i]; fr.onload = function(single) { var picHtml = "<div class='imageDiv' > <img id='img" + single.name + "' src='" + single.target.result + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>" picDiv.prepend(picHtml); var imgObjPreview = document.getElementById("img" + single.name); //圖片屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; }; fr.readAsDataURL(single); } }); /*刪除功能*/ $(document).on("click",".delbtn",function () { console.log("click") var _this=$(this); _this.parents(".imageDiv").remove(); });
另外,刪除功能的js代碼可以如上面代碼一樣寫(xiě)在外邊,也可以寫(xiě)在change事件for循環(huán)外,這樣就不用on,可以直接以刪除按鈕的class來(lái)寫(xiě)了,如:
//圖片上傳預(yù)覽功能 var userAgent = navigator.userAgent;//用于判斷瀏覽器類型 $(".file").change(function () { //獲取選擇圖片的對(duì)象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的圖片文件 var fileList = docObj.files; //循環(huán)遍歷 for (var i = 0; i < fileList.length; i++) { //動(dòng)態(tài)添加html元素 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>" picDiv.prepend(picHtml); //獲取圖片imgi的對(duì)象 var imgObjPreview = document.getElementById("img"+fileList[i].name); if (fileList && fileList[i]) { //圖片屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要以下方式 if(userAgent.indexOf('MSIE') == -1){//IE以外瀏覽器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //獲取上傳圖片文件的物理路徑 }else{//IE瀏覽器 if(docObj.value.indexOf(",")!=-1){ var srcArr=docObj.value.split(","); imgObjPreview.src = srcArr[i]; }else{ imgObjPreview.src = docObj.value; } } } } /*刪除功能*/ $(".delbtn").click(function () { var _this=$(this); _this.parents(".imageDiv").remove(); }); });
此篇主要體現(xiàn)了兩點(diǎn):
1.input file 按鈕改成自己想要的樣式,就是將原本的input隱藏,用另一個(gè)標(biāo)簽<a>,<button>,<div>......代替,css控制他們加上自己需要的樣式就可以了;
2.圖片預(yù)覽功能的實(shí)現(xiàn),這里又分兩種方法。
好了,到這里這篇就寫(xiě)完了,希望對(duì)你有所幫助。
相關(guān)文章
Jquery post傳遞數(shù)組方法實(shí)現(xiàn)思路及代碼
Jquery post 傳遞數(shù)組以做批量刪除會(huì)需要傳遞要?jiǎng)h除的數(shù)據(jù)ID數(shù)組,下面是具體的實(shí)現(xiàn)代碼,感興趣的童鞋們可以參考下2013-04-04jQuery 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法
下面小編就為大家?guī)?lái)一篇jQuery 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Jquery動(dòng)態(tài)改變圖片IMG的src地址示例
改變圖片IMG的鏈接地址在某些特殊情況下實(shí)現(xiàn)特殊的功能還是比較不錯(cuò)的,下面為大家詳細(xì)介紹下使用jquery改變圖片IMG的鏈接地址,感興趣的朋友可以參考下哈2013-06-06jQuery延遲執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery延遲執(zhí)行的實(shí)現(xiàn)方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)無(wú)法同步執(zhí)行的情況使用延遲執(zhí)行的操作技巧,需要的朋友可以參考下2016-12-12jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果
開(kāi)發(fā)一個(gè)jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果,實(shí)現(xiàn)步驟很詳細(xì),感興趣的小伙伴們可以參考一下2015-12-12使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷(可換膚)
點(diǎn)擊姓名會(huì)顯示她的基本詳細(xì)信息,點(diǎn)擊切換皮膚,會(huì)更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷2013-04-04a標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇a標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10