基于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 radio 操作代码
Mar 16 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
es6数据变更同步到视图层的方法
2019/03/04 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
C语言编程练习
2012/04/02 面试题
硕士研究生就业推荐信
2014/05/18 职场文书
模范教师材料大全
2014/12/16 职场文书
先进典型事迹材料
2014/12/29 职场文书
给医院的感谢信
2015/01/21 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书