H5移動(dòng)開(kāi)發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器
廢話不多說(shuō),直接看代碼吧
1、上傳組件
<div class="imgbox"> <img class="goodsimg" src="../../assets/addimg.png"> <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/> </div>
2、展示添加上的圖片
viewimg($event) { //獲取當(dāng)前的input標(biāo)簽 var currentObj = event.currentTarget; //找到要預(yù)覽的圖片img標(biāo)簽,亦可動(dòng)態(tài)生成 var img = currentObj.parentNode.children[0]; setImagePreview(currentObj, img); function setImagePreview(docObj, imgObjPreview) { if (docObj.files && docObj.files[0]) { imgObjPreview.style.display = 'block'; imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } } }
3、獲取圖片并上傳到服務(wù)器
//單張圖片上傳 var inputs = $("input.fileupload"); for (var i = 0; i < inputs.length; i++) { //圖片轉(zhuǎn)base64上傳 var file = inputs[i].files; if (file[0]) { var reader = new FileReader(); reader.readAsDataURL(file[0]); reader.onload = function(e) { var event = this; console.log(event.result); $.ajax({ type: 'POST', url: 'http://10.145.0.05/goods/addGoodsBase64', dataType: "json", data: { "base64": event.result, }, success: function(data) { console.log(data); } }); } } }
好了,就是這個(gè)過(guò)程,接下來(lái)的就交給后端的同學(xué)處理了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
初步了解JavaScript,Ajax,jQuery,并比較三者關(guān)系
這篇文章主要介紹了初步了解JavaScript,Ajax,jQuery,并比較三者關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-10-10jquery中AJAX請(qǐng)求 $.post方法的使用
使用jQuery的$.post方法可以以POST形式向服務(wù)器發(fā)起AJAX請(qǐng)求.本篇文章主要給大家講解jquery中AJAX請(qǐng)求 $.post方法的使用,需要的朋友可以參考下2015-10-10自己動(dòng)手打造ajax圖片上傳(網(wǎng)上沒(méi)有的)
需要一款圖片上傳插件,但是網(wǎng)上沒(méi)有提供一款符合自己需求且好用的。于是就自己動(dòng)手寫了一個(gè),需要的朋友可以參考下2014-06-06AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解
這篇文章主要介紹了AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01Ajax獲得站點(diǎn)文件內(nèi)容實(shí)例
Ajax獲得站點(diǎn)文件內(nèi)容實(shí)例:選擇一部著作,會(huì)通過(guò) Ajax 實(shí)時(shí)獲得相關(guān)的名字,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09深入淺析Nginx實(shí)現(xiàn)AJAX跨域請(qǐng)求問(wèn)題
AJAX從一個(gè)域請(qǐng)求另一個(gè)域會(huì)有跨域的問(wèn)題。那么如何在nginx上實(shí)現(xiàn)ajax跨域請(qǐng)求呢?此問(wèn)題難住很多朋友,下面小編給大家?guī)?lái)了Nginx實(shí)現(xiàn)AJAX跨域請(qǐng)求問(wèn)題的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-06-06那些年,我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記
Ajax不用說(shuō),每個(gè)做web開(kāi)發(fā)的同志都知道,因?yàn)樗菍W(xué)習(xí)web開(kāi)發(fā)必經(jīng)之路,不管你是做asp.net,還是javaWeb,還是PHP2012-03-03ajax 數(shù)據(jù)庫(kù)中隨機(jī)讀取5條數(shù)據(jù)動(dòng)態(tài)在頁(yè)面中刷新
以下是我在此編寫一個(gè)程序時(shí)的時(shí)刻所遇到的問(wèn)題。因?yàn)橐婚_(kāi)始經(jīng)理給我分配了要我寫一個(gè)在頁(yè)面上動(dòng)態(tài)的顯示5條數(shù)據(jù)。2009-06-06