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.timer插件实现一个计时器
Apr 25 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
yii用户注册表单验证实例
2015/12/26 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python线程的两种编程方式
2015/04/14 Python
python实现各进制转换的总结大全
2017/06/18 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
大二学期个人自我评价
2014/01/13 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
策划总监岗位职责
2014/02/16 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
保研推荐信
2014/05/09 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书