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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
八种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中Date获取时间不正确怎么办
2008/06/05 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php中session与cookie的比较
2015/01/27 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python读取Excel的方法实例分析
2015/07/11 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Django logging配置及使用详解
2019/07/23 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
如何选择使用结构还是类
2014/05/30 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
员工离职证明范本
2015/06/12 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Python 文字识别
2022/05/11 Python