基于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 相关文章推荐
jquery默认校验规则整理
Mar 24 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
JavaScript验证知识整理
Mar 24 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python编写计算器功能
2019/10/25 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
党员自我评价分享
2013/12/13 职场文书
优秀班组长事迹
2014/05/31 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技