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)文章
這篇文章主要介紹了pushState實現(xiàn)Ajax無刷新頁面切換的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Ajax與mysql數(shù)據(jù)交互實現(xiàn)留言板功能
最近自己做了一個小demo，實現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺用的是PHP，數(shù)據(jù)庫是mysql，下面通過本文給大家詳細(xì)介紹下2016-12-12
今天小編就為大家分享一篇ajax處理返回的json格式數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在編程過程中使用ajax調(diào)用數(shù)據(jù)的時候，難免要進行邏輯的處理，接受的數(shù)據(jù)也變的復(fù)雜比如數(shù)組類型的數(shù)據(jù)，這時候就需要使用JSON數(shù)據(jù)類型進行處理，通過本篇文章給大家介紹Ajax異步請求json數(shù)據(jù)，需要的朋友可以參考下本文2015-09-09
這篇文章主要介紹了雙層ajax嵌套（可多層）用法,實例分析了Ajax嵌套的相關(guān)使用技巧,可實現(xiàn)多層嵌套的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。本文跟大家介紹JQuery中$.ajax()方法參數(shù)詳解，小伙伴們一起學(xué)習(xí)吧2015-10-10
ajax讀取properties資源文件數(shù)據(jù)的方法
這篇文章主要介紹了ajax讀取properties資源文件數(shù)據(jù)的方法,實例分析了基于Ajax實現(xiàn)讀取properties資源文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
AJAX簡歷系統(tǒng)附j(luò)s文件...2007-08-08
ajax的工作原理想必大家都有所了解吧，不懂的可以看看本文。下面是注冊驗證案例register。php是注冊頁面。registerProcess.php用于接收數(shù)據(jù)并返回數(shù)據(jù)2013-10-10
這篇文章主要為大家詳細(xì)介紹了ajax實現(xiàn)無刷新上傳文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08