基于VUE选择上传图片并页面显示(图片可删除)


Posted in Javascript onMay 25, 2017

基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下

demo例子:

基于VUE选择上传图片并页面显示(图片可删除)

依赖文件:jqueryform

HTML文本内容:

<template>
 <div id="accident">
 <div class="wrapper">
 <i class="icon-pic"></i>相关照片
 <button type="button" @click="change_input()">上传照片</button>
 <form id="addTextForm" @change="setImg($event)">
 </form>
 </div>
 <div id="img-wrapper" @click="deleteImg($event)"></div>
 <P class="btn-wrapper">
 <mt-button type="primary" @click="submit()">提交</mt-button>
 </P>
 </div>
</template>

JS文本内容:

<script>
 /** 
 * 从 file 域获取 本地图片 url 
 */ 
 function getFileUrl(obj) { 
 let url; 
 url = window.URL.createObjectURL(obj.files.item(0)); 
 return url; 
 }

export default {
 name: 'accident',
 // 定义数据
 data () {
 return {
 imgNum:4, //上传的照片数量,可根据实际情况自定义 
 }
 },//定义事件
 methods:{
 //根据点击上传按钮触发input
 change_input(){
 let inputArr=$('#addTextForm input');
 let add_inputId=''; //需要被触发的input
 for(let i=0;i<inputArr.length;i++){
 // 根据input的value值判断是否已经选择文件
 if(!inputArr[i].value){ //如果没有选择,获得这个input的ID 
 add_inputId=inputArr[i].id;
 break;
 }
 }
 if(add_inputId){ //如果需要被触发的input ID存在,将对应的input触发
 return $("#"+add_inputId).click();
 }else{
 alert("最多选择"+this.imgNum+"张图片")
 }
 },
 //当input选择了图片的时候触发,将获得的src赋值到相对应的img
 setImg(e){
 let target=e.target;
 $('#img_'+target.id).attr('src',getFileUrl(e.srcElement));
 },
 //点击图片删除该图片并清除相对的input
 deleteImg(e){
 let target=e.target;
 let inputID=''; //需要清除value的input
 if(target.nodeName=='IMG'){
 target.src='';
 inputID=target.id.replace('img_',''); //获得需要清除value的input
 $('input#'+inputID).val("");
 }
 },
 //提交信息到后台
 submit(){
 $("#addTextForm").ajaxSubmit({
 url: this.$root.api+"/Index/staff_accident/add", 
 type: "post",
 data: {
 'total_price':this.price,
 'descript':this.descript,
 },
 success: (data) => {
 if(data.code==0){
 console.log(‘提交成功');
 }else{
 alert('提交失败');
 }
 }
 }); 
 }
 },
 //页面加载后执行
 mounted(){
 for(let i=0;i<this.imgNum;i++){
 //生成input框,默认为1
 let my_input = $('<input type="file" name="image" />'); //创建一个input
 my_input.attr('id',i); //为创建的input添加id
 $('#addTextForm').append(my_input); //将生成的input追加到指定的form
 //生成img,默认为1
 let my_img = $('<img src="">');
 my_img.attr('id', 'img_'+i);
 my_img.css({"max-width":"50%","max-height":"200px"}); 

 //添加样式,由于vue的执行机制,页面加载的时候img标签还没有生成,直接写在style样式会不生效
 $('#img-wrapper').append(my_img); 
 }
 },
}
</script>

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

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 #Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
Angular 2.x学习教程之结构指令详解
May 25 #Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 #Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
You might like
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python用for循环实现九九乘法表
2018/05/31 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Django models.py应用实现过程详解
2019/07/29 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
英语教师自荐信
2014/05/26 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
迎国庆主题班会
2015/08/17 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书