基于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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jquery实现倒计时功能
Dec 28 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
详解如何修改 node_modules 里的文件
May 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
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
js/html光标定位的实现代码
2013/09/23 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python 中@property的用法详解
2020/01/15 Python
django创建css文件夹的具体方法
2020/07/31 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
聊聊python中的循环遍历
2020/09/07 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
党员批评与自我批评
2014/02/12 职场文书
活动总结报告范文
2014/05/04 职场文书
借条格式范本
2015/05/25 职场文书
小学班主任研修日志
2015/11/13 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书