javascript实现移动端上传图片功能


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了javascript实现移动端上传图片的具体代码,供大家参考,具体内容如下

核心部分(.html)

window.onload = function() {
 let fileTag = document.getElementById('file');
 // console.log(fileTag)
 // console.log(this.pic)
 let that = this
 
 fileTag.onchange = function() {
 let file = fileTag.files[0];
 let fileReader = new FileReader();
 // console.log(file)
 console.log(fileReader)
 // console.log(that.pic)
 fileReader.onloadend = function() {
 console.log(1212)
 if (fileReader.readyState == fileReader.DONE) {
  // console.log(that.pic)
  console.log(fileReader)
  
  if(that.pic=="") {
  console.log(1111)
  that.pic = fileReader.result
  that.input1 = false
  
  that.upLoad(fileReader.result)
  return
  }else{
  if(that.pic2=='') {
  console.log(2222)
  that.pic2 = fileReader.result
  that.input2 = false
  return
  }else {
  if(that.pic3=='') {
  console.log(3333)
  that.pic3 = fileReader.result
  that.input3 = false
  return
  }else {
  if(that.pic4=='') {
   console.log(4444)
   that.pic4 = fileReader.result
   that.input4 = false
   return
  }else {
   console.log(5555)
   if(that.pic5=='') {
   that.pic5 = fileReader.result
   that.input5 = false
   return
   }
   
  }
  }
  }
  
  }
  // console.log(that.pic)
 }
 };
 
 fileReader.readAsDataURL(file);
 }
}

vue项目代码

主要是HTML页面设计

<div class="imgBox" @click="upImg">
 <div style="display:flex;flex-flow:wrap;">
 <div class="Img" >
 <label>
 <img v-if="pic==''" src="./img/addPhotos.jpg">
 <img v-else width='100%' height='100%' style="border-radius:5px" id="img" :src="pic">
 <input v-if="input1" class="myInput" type="file" id="file" accept="image/*" multiple required>
 </label>
 <div v-if="pic!=''" class="myDel" @click="delImg(1)">X</div>
 
 </div>
 <div class="Img" v-if="pic!='' || !input2">
 <label>
 <img v-if="pic2==''" src="./img/addPhotos.jpg">
 <img v-else width='100%' height='100%' style="border-radius:5px" :src="pic2">
 <input v-if="input2" class="myInput" type="file" id="file" accept="image/*" multiple required>
 </label>
 <div v-if="pic2!=''" class="myDel" @click="delImg(2)">X</div>
 </div>
 <div class="Img" v-if="(pic!='' && pic2!='' ) || !input3">
 <label>
 <img v-if="pic3==''" src="./img/addPhotos.jpg">
 <img v-else width='100%' height='100%' style="border-radius:5px" :src="pic3">
 <input v-if="input3" class="myInput" type="file" id="file" accept="image/*" multiple required>
 </label>
 <div v-if="pic3!=''" class="myDel" @click="delImg(3)">X</div>
 </div>
 <div class="Img" v-if="(pic!='' && pic2!='' && pic3!='') || !input4">
 <label>
 <img v-if="pic4==''" src="./img/addPhotos.jpg">
 <img v-else width='100%' height='100%' style="border-radius:5px" :src="pic4">
 <input v-if="input4" class="myInput" type="file" id="file" accept="image/*" multiple required>
 </label>
 <div v-if="pic4!=''" class="myDel" @click="delImg(4)">X</div>
 </div>
 <div class="Img" v-if="(pic!='' && pic2!='' && pic3!='' && pic4!='') || !input5">
 <label> 
 <img v-if="pic5==''" src="./img/addPhotos.jpg">
 <img v-else width='100%' height='100%' style="border-radius:5px" :src="pic5">
 <input v-if="input5" class="myInput" type="file" id="file" accept="image/*" multiple required>
 </label>
 <div v-if="pic5!=''" class="myDel" @click="delImg(5)">X</div>
 </div>
 </div>
</div>

data()部分

pic:'',
pic2:'',
pic3:'',
pic4:'',
pic5:'',
input1:true,
input2:true,
input3:true,
input4:true,
input5:true

methods:{}部分

upImg() {
 
 // window.onload = function() {
 let fileTag = document.getElementById('file');
 // console.log(fileTag)
 // console.log(this.pic)
 let that = this
 
 fileTag.onchange = function() {
 let file = fileTag.files[0];
 let fileReader = new FileReader();
 // console.log(file)
 console.log(fileReader)
 // console.log(that.pic)
 fileReader.onloadend = function() {
 console.log(1212)
 if (fileReader.readyState == fileReader.DONE) {
  // console.log(that.pic)
  console.log(fileReader)
  
  if(that.pic=="") {
  console.log(1111)
  that.pic = fileReader.result
  that.input1 = false
  
  that.upLoad(fileReader.result)
  return
  }else{
  if(that.pic2=='') {
  console.log(2222)
  that.pic2 = fileReader.result
  that.input2 = false
  return
  }else {
  if(that.pic3=='') {
  console.log(3333)
  that.pic3 = fileReader.result
  that.input3 = false
  return
  }else {
  if(that.pic4=='') {
   console.log(4444)
   that.pic4 = fileReader.result
   that.input4 = false
   return
  }else {
   console.log(5555)
   if(that.pic5=='') {
   that.pic5 = fileReader.result
   that.input5 = false
   return
   }
  }
  }
  }
  }
  // console.log(that.pic)
 }
 };
 fileReader.readAsDataURL(file);
 }
 // } 
},
delImg(num) {
 if(num==1) {
 this.pic = ''
 this.input1 = true
 }
 if(num==2) {
 this.pic2 = ''
 this.input2 = true
 }
 if(num==3) {
 this.pic3 = ''
 this.input3 = true
 }
 if(num==4) {
 this.pic4 = ''
 this.input4 = true
 }
 if(num==5) {
 this.pic5 = ''
 this.input5 = true
 }
}

css部分(style)

#order .imgBox {
 margin-bottom: 100px;
 padding: 20px;
 box-sizing: border-box;
 background: #fff;
 height: 250px;
}

#order .Img {
 width: 90px;
 height: 90px;
 background: #fff;
 text-align: center;
 line-height: 132px;
 box-sizing: border-box;
 border-radius: 5px;
 border: 1px solid rgba(0,0,0,.2);
 position: relative;
 margin: 0 20px 20px 0;
}

#order .myInput {
 opacity:0;
 position:absolute;
 top:0;
 top:0;
 width:90px;
 height:90px;
 left:0;
}

#order .myDel {
 color: #fff;
 position: absolute;
 right: -10px;
 top: -7px;
 width: 25px;
 height: 25px;
 border-radius: 25px;
 line-height: 25px;
 background: rgba(0,0,0,.5);
}

效果图

javascript实现移动端上传图片功能

javascript实现移动端上传图片功能

javascript实现移动端上传图片功能

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
小程序实现上传视频功能
Aug 18 #Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
vue实现移动端input上传视频、音频
Aug 18 #Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 #Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 #Javascript
js实现简单扫雷
Nov 27 #Javascript
You might like
php xml 入门学习资料
2011/01/01 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python命令 -u参数用法解析
2019/10/24 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python实现计算器简易版
2020/12/17 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
在校学生证明格式
2015/06/24 职场文书
教研活动主持词
2015/07/03 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers