H5移動(dòng)開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下H5移動(dòng)開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為管城企業(yè)提供專業(yè)的
成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，
管城網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
1、上傳組件
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);
}
});
}
}
}以上是“H5移動(dòng)開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章題目：H5移動(dòng)開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器的示例分析-創(chuàng)新互聯(lián)
鏈接分享：
http://weahome.cn/article/dcdcpg.html
重慶分公司
重慶分公司
