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 ajax 用户无刷新登录方法详解
Apr 28 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
在Windows版的PHP中使用ADO
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python字符串的方法与操作大全
2018/01/30 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
电气专业推荐信范文
2013/11/18 职场文书
最新党员思想汇报
2014/01/01 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
校园文明倡议书
2014/05/16 职场文书
无房证明范本
2014/09/17 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
小学教育见习报告
2014/10/31 职场文书
铣工实训报告
2014/11/05 职场文书
话题作文之呼唤
2019/12/18 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
go开发alertmanger实现钉钉报警
2021/07/16 Golang
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers