基于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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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的论坛(5)
2006/10/09 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Seajs的学习笔记
2014/03/04 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Python Property属性的2种用法
2015/06/21 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
使用requests库制作Python爬虫
2018/03/25 Python
python模糊图片过滤的方法
2018/12/14 Python
python实现飞机大战小游戏
2019/11/08 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
前台领班岗位职责
2013/12/04 职场文书
好人好事事迹材料
2014/02/12 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
年会邀请函范文
2015/01/30 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android