項(xiàng)目中經(jīng)常會大量的使用到圖片上傳,之前涉及到的時(shí)候經(jīng)常會在網(wǎng)上下載一些素材直接拿過來使用,但是隨著項(xiàng)目的增多發(fā)現(xiàn)用的是各式各樣的,導(dǎo)致非?;靵y。所以抽空寫了一個(gè)DEMO來梳理下圖片上傳的流暢以及單圖和多圖上傳需要注意的點(diǎn)。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的平潭網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
多圖上傳
多圖上傳,這里僅僅是做了前端的展示效果,實(shí)際項(xiàng)目中,多圖上傳應(yīng)該是每次上傳一張圖片后向后臺發(fā)送一次請求,后臺返回img路徑然后進(jìn)行展現(xiàn)。
為什么一定要傳入后臺在進(jìn)行展現(xiàn)呢?
1.如果直接在前臺先展現(xiàn)base64圖片路徑,在向后臺發(fā)送請求。如果接口出現(xiàn)錯(cuò)誤后,會給用戶產(chǎn)生錯(cuò)覺,以為圖片上傳成功,而這時(shí)后臺是沒有接收到圖片的;
2.file文件每次發(fā)生變化,會將之前的files文件給覆蓋掉。如果直接展現(xiàn)不用ajax提交后,最終用form提交只會提交最后一張。
單圖上傳
去掉input中的multiple 屬性就變成了單圖上傳;
按照上邊的代碼直接就可以實(shí)現(xiàn)單圖上傳和多圖上傳。下邊在說下單圖上傳和多圖上傳提交需要注意的;
1.單圖上傳可以跟隨form表單一起提交,給input一個(gè)name值后臺就可以提交過去;
2.多圖上傳不可以跟form一起提交,因?yàn)槊看紊蟼骱骹ile只會保留最新的;可以先通過ajax將圖片提交成功后,在form內(nèi)去循環(huán)創(chuàng)建隱藏的input將后臺返回的路徑設(shè)置成改input的val值最后跟隨form提交;需要注意隱藏的input的name值寫成[]形式,比如:name=“img[]”。這樣在form提交的時(shí)候后臺就可以接受到所有的圖片;
以上的代碼,適用于前端點(diǎn)擊file上傳圖片后的顯示。具體與后臺的一些交互可以根據(jù)實(shí)際項(xiàng)目中的需求進(jìn)行增加!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。