<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" >
</head>
<style>
*,body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: 400;
vertical-align: baseline;
}
body, html {
line-height: 1;
font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* -webkit-tap-highlight-color: transparent; */
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
header{
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #43cf7c;
box-shadow: 0 1px 6px #ccc;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
}
li{ list-style: none;}
.cube-btn-primary{
background-color: #4285F4!important;
}
header h1{
color: white!important;
}
.cubeic-back{
position: absolute;
top: 0;
left: 0;
padding: 0 15px;
color: white;
font-family: cube-icon!important;
font-size: 100%;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscal
}
.cubeic-back:before {
content: "\E608";
}
.imgli{
width: 100%;
}
.imgli .descimgs{
display: inline-block;
width: 25%;
float: left;
}
.imgli div img{
border: 1px solid #E1E1E1;
box-sizing: border-box;
width: 100%;
display: block;
height: 80px;
}
.makesure{
width: 100%;
height: 45px;
margin: auto;
text-align: center;
position: fixed;
bottom: 30px;
}
.makesure span{
display: block;
line-height: 45px;
text-align: center;
width: 80%;
background: #43cf7c;
color: white;
margin: auto;
z-index: 1000;
}
@media screen and (min-width: 800px) {
#app {
width: 540px!important;
margin: auto;
}
.mint-header {
width: 540px!important;
}
}
</style>
<body>
<div id="app">
<header class="header"><h1>圖庫(kù)選擇</h1> <i class="cubeic-back" @click="goback"></i></header>
<ul>
<li v-for="(list,index) in datalist" class="imgli">
<div v-for="(view,index) in list.details.descimgs" @click="picturesClick(view,index,$event)" class="descimgs detail-btn">
<img :src="view" class="viewimg" />
</div>
<div v-for="(view,index) in list.details.pictures" @click="picturesClick(view,index,$event)" class="descimgs detail-btn">
<img :src="view" class="viewimg" />
</div>
</li>
</ul>
<div class="makesure"><span @click="suresubmit">確認(rèn)上傳</span></div>
<input id="upbigmore" type="file" style="display: none;" accept='image/*' name="file" @change="ScrollChange($event)"/>
</div>
<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<script src="http://www.17sucai.com/static/js/jquery.min.js"></script>
<script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
xsun:0,
pagelength:'',
indexmain:0,
setdata:[],
builddata:[],
datalist :[],
imgchange:false,
LINK:'http://kuaidi.haxbs.com',
imglength:[],
lefttxt:'',
weighttxt:'',
value:'這是一個(gè)商品',
actions:[
{
text: '完成訂單',
action: 'showText'
},
],
},
methods: {
picturesClick(viewitem,viewindex,viewevent){
if (viewevent.target.className.indexOf("detail-selected") == -1) {
this.builddata = this.builddata.concat(viewitem)
if(this.builddata.length>4){
viewevent.target.className = ""; //切換按鈕樣式
this.builddata.length = 4
const toast = this.$createToast({
time: 500,
txt: '最多只能上傳4張圖片'
})
toast.show()
return false;
}else{
viewevent.target.className = "detail-btn detail-selected"; //切換按鈕樣式
}
} else {
if(this.builddata.length>4){
this.builddata.length = 4
viewevent.target.className = "detail-btn";//切換按鈕樣式
var delone = this.builddata.indexOf(viewitem)
this.builddata.splice(delone,1)
}else{
viewevent.target.className = "detail-btn";//切換按鈕樣式
var delone = this.builddata.indexOf(viewitem)
this.builddata.splice(delone,1)
}
}
},
suresubmit(){
if(this.builddata.length ===0) {
const toast = this.$createToast({
time: 1500,
txt:'請(qǐng)上傳圖片！再次提交'
})
toast.show()
return false
}
////console.log(this.builddata)
const toast = this.$createToast({
time:0,
txt: 'loading',
mask: true
})
toast.show()
let p1,p2,p3,p4;
let urlp1=this.builddata[0];
if(this.builddata[0]!=undefined&&this.builddata[0]!=""){
p1 = new Promise((resolve, reject) => {
var param = new FormData(); //創(chuàng)建form對(duì)象
param.append('url',this.builddata[0]) //對(duì)應(yīng)后臺(tái)接收?qǐng)D片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
console.info(res);
console.info(res.body.code);
if(res.body.code === 200){
resolve(res.body.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p1 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[1]!=undefined&&this.builddata[1]!=""){
p2 = new Promise((resolve, reject) => {
var param = new FormData(); //創(chuàng)建form對(duì)象
param.append('url',this.builddata[1]) //對(duì)應(yīng)后臺(tái)接收?qǐng)D片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p2 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[2]!=undefined&&this.builddata[2]!=""){
p3 = new Promise((resolve, reject) => {
var param = new FormData(); //創(chuàng)建form對(duì)象
param.append('url',this.builddata[2]) //對(duì)應(yīng)后臺(tái)接收?qǐng)D片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p3 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[3]!=undefined&&this.builddata[3]!=""){
p4 = new Promise((resolve, reject) => {
var param = new FormData(); //創(chuàng)建form對(duì)象
param.append('url',this.builddata[3]) //對(duì)應(yīng)后臺(tái)接收?qǐng)D片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p4 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
Promise.all([p1, p2, p3,p4]).then(function(values) {
toast.hide()
//console.log(values);
var newArr = new Array();
for(var i=0;i< values.length;i++){
var j=values[i];
if(j.name!=undefined&&j.name!=""){
newArr.push(j);
}
}
console.info(newArr);
if (window.localStorage){
var Datatransmission=JSON.stringify(newArr);//將json對(duì)象轉(zhuǎn)化成字符串
localStorage.setItem("passData",Datatransmission);
window.location.href = 'upimg.html';
}
}).catch((error) => {
//console.log(error)
})
},
descimgsClick(viewitem,b){
},
goback(){
window.history.back(); //返回
},
cartView(a) {
var that = this;
var nametitle = localStorage.getItem("localtradename")
var formData = new FormData();
formData.append('title', nametitle)
$.ajax({
url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+nametitle,
type : 'get',
dataType:'jsonp',
success : function(resp){
JSON.stringify(resp);
that.datalist = resp
JSON.stringify(that.datalist);
},
error : function(resp){
//console.log(resp);
}
});
},
},
mounted: function() {
this.$nextTick(function() {
this.cartView();
});
},
});
</script>
</body>
</html>
上傳圖片回顯在次上傳判斷數(shù)據(jù)是上傳后的還是沒(méi)有上傳的再次提交
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)亩鬼，“玉大人殖告，你說(shuō)我怎么就攤上這事■ǚ妫” “怎么了黄绩？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)玷过。 經(jīng)常有香客問(wèn)我爽丹，道長(zhǎng)，這世上最難降的妖魔是什么辛蚊？ 我笑而不...
- 正文 為了忘掉前任粤蝎，我火速辦了婚禮，結(jié)果婚禮上袋马，老公的妹妹穿的比我還像新娘初澎。我一直安慰自己，他們只是感情好虑凛，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布碑宴。 她就那樣靜靜地躺著，像睡著了一般桑谍。 火紅的嫁衣襯著肌膚如雪延柠。 梳的紋絲不亂的頭發(fā)上，一...
- 那天锣披，我揣著相機(jī)與錄音捕仔，去河邊找鬼。 笑死盈罐，一個(gè)胖子當(dāng)著我的面吹牛榜跌，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播盅粪，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼钓葫，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了票顾？” 一聲冷哼從身側(cè)響起础浮，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤帆调，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后豆同，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體番刊，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年影锈，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芹务。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布，位于F島的核電站讼载，受9級(jí)特大地震影響轿秧，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜咨堤，卻給世界環(huán)境...
- 文/蒙蒙 一淤刃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吱型，春花似錦逸贾、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至触徐，卻和暖如春咪鲜，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背撞鹉。 一陣腳步聲響...
- 正文 我出身青樓享郊，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親孝鹊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子炊琉，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 微信電商被簡(jiǎn)稱為微商苔咪，在火熱了一段之間之后锰悼，最近陷入到了爭(zhēng)議之中，各種各樣的所謂培訓(xùn)演變成了傳銷团赏，面膜的質(zhì)量被質(zhì)疑...
- 贏家福蜜會(huì)，源于贏家聯(lián)合創(chuàng)始人林孜先生痢虹，一心打造一群懂得用智慧去創(chuàng)造幸福人生的女人們被去。 對(duì)福蜜會(huì)的價(jià)值認(rèn)知，從過(guò)去...
