基于VUE选择上传图片并在页面显示(图片可删除)
demo例子:
依赖文件 :
- http://files.cnblogs.com/files/zhengweijie/jquery.form.rar
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(‘提交成功’);
$("#addTextForm input").val('');
$('div#img-wrapper img').attr('src','');
- }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>
基于VUE选择上传图片并在页面显示(图片可删除)的更多相关文章
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- 基于Vue的SPA动态修改页面title的方法
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...
- 关于springmvc 只能在index.jsp页面显示图片的处理办法jsp页面无法显示图片
首先,已经配置好了mvc对静态资源的处理 只有index,jsp可以显示图片 其他页面同样的代码则不显示 后来折腾了半天,发现 index是static的父目录的级别文件 可以向下访问 但是其他的js ...
- 基于Vue的SPA如何优化页面加载速度
常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使 ...
- 【Vue中的坑】vue项目中动态绑定src不显示图片解决方法
v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染 ...
- spring mvc页面显示图片失败
在配置文件中需要映射静态资源 <!-- 当在web.xml 中 DispatcherServlet使用 <url-pattern>/</url-pattern> 映射时, ...
- [YII2] 展示页面显示图片 以及手机号隐藏为*和姓名隐藏姓为*,
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
- day112:MoFang:种植园使用websocket代替http&服务端基于flask-socketio提供服务&服务端响应信息&种植园页面显示初始化
目录 1.种植园使用websocket代替http 2.服务端基于socket提供服务 3.服务端响应信息 4.种植园页面展示 1.种植园使用websocket代替http 我们需要完成的种植园,是一 ...
随机推荐
- Macaca环境搭建踩坑总结
1.使用命令 npm i macaca-android -g 安装一直不成功,使用Macaca doctor 一直没有显示出android C:\Users\ABC>npm i macaca- ...
- JavaScript调试技巧
熟悉工具可以让工具在工作中发挥出更大的作用.尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug. 文中已经列出了14个你可能不知道的调试技巧,但是 ...
- kafka资料
https://www.cnblogs.com/the-tops/p/5685955.html
- 有关opacity或RGBA设置颜色值及元素的透明值
opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来 ...
- mysql 错误信息
1 连接MySQL错误:Can't connect to MySQL server (10060) link:>>> http://blog.csdn.net/testcs_dn/ ...
- [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中
百度网盘下载地址:https://pan.baidu.com/s/1kULNXOF 优酷土豆观看地址:http://v.youku.com/v_show/id_XMzAwNTY2MTE0MA==.ht ...
- 漫话JavaScript与异步·第三话——Generator:化异步为同步
一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...
- python3基础(一)
1. python文件主程序入口文件一般来要申明python路径,编码信息,作者说明等: #!/usr/bin/env python # _*_ coding: utf-8 _*_ # Author: ...
- asp.net core 2.0 查缺补漏
asp.net core 2.0 一些有用有趣的设置. 面向(targeting)不同的.net版本: 打开asp.net core 2.0的项目文件: xxx.csproj, 这部分: <Pr ...
- 使用阿里云镜像maven管理配置开发环境
修改方法:在~/.m2目录下的settings.xml文件中,(如果该文件不存在,则需要从maven/conf目录下拷贝一份),找到<mirrors>标签,添加如下子标签: <mir ...