基于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据option的value值快速设定初始的selected选项
Aug 13 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
常用jQuery选择器总结
Jul 11 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 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 用sock技术发送邮件的函数
2007/07/21 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Vue响应式原理详解
2017/04/18 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
文明村创建实施方案
2014/03/27 职场文书
兴趣小组活动总结
2014/05/05 职场文书
服装设计专业自荐信
2014/06/17 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers