基于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 slibings选取同级其他元素的实现代码
Nov 15 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
详解TypeScript中的类型保护
Apr 29 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
理解Python中的With语句
2015/02/02 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
自我鉴定标准格式
2014/03/19 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
法院执行局工作总结
2015/08/11 职场文书
《假如》教学反思
2016/02/17 职场文书