基于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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
js表数据排序 sort table data
Feb 18 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
js Math 对象的方法
Sep 01 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
JavaScript ES6的函数拓展
Jan 18 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 xml常用函数的集合(比较详细)
2013/06/06 PHP
php分页示例分享
2014/04/30 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
JS location几个方法小姐
2008/07/09 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
js实现简单进度条效果
2020/03/25 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
python实现清屏的方法
2015/04/30 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
文秘人员工作职责
2014/01/31 职场文书
小学生安全保证书
2014/02/01 职场文书
会议主持词
2014/03/17 职场文书
法人授权委托书范本
2014/09/17 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
企业财务管理制度范本
2015/08/04 职场文书
检讨书格式
2019/04/25 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS