H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器
更新時間:2017年05月18日 14:15:59 作者:漣動下漁舟
這篇文章主要為大家詳細(xì)介紹了H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器,具有一定的參考價值,感興趣的小伙伴們可以參考一下
廢話不多說,直接看代碼吧
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)簽,亦可動態(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);
}
});
}
}
}
好了,就是這個過程,接下來的就交給后端的同學(xué)處理了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Ajax與mysql數(shù)據(jù)交互實現(xiàn)留言板功能
最近自己做了一個小demo,實現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互,js部分用的是jq,后臺用的是PHP,數(shù)據(jù)庫是mysql,下面通過本文給大家詳細(xì)介紹下2016-12-12
ajax讀取properties資源文件數(shù)據(jù)的方法
這篇文章主要介紹了ajax讀取properties資源文件數(shù)據(jù)的方法,實例分析了基于Ajax實現(xiàn)讀取properties資源文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-06-06

