demo例子:

依赖文件 :

  1. http://files.cnblogs.com/files/zhengweijie/jquery.form.rar

HTML文本内容:

  1. <template>
  2. <div id="accident">
  3. <div class="wrapper">
  4. <i class="icon-pic"></i>相关照片
  5. <button type="button" @click="change_input()">上传照片</button>
  6. <form id="addTextForm" @change="setImg($event)">
  7. </form>
  8. </div>
  9. <div id="img-wrapper" @click="deleteImg($event)"></div>
  10. <P class="btn-wrapper">
  11. <mt-button type="primary" @click="submit()">提交</mt-button>
  12. </P>
  13. </div>
  14. </template>

JS文本内容:

  1. <script>
  2. /**
  3. * 从 file 域获取 本地图片 url
  4. */
  5. function getFileUrl(obj) {
  6. let url;
  7. url = window.URL.createObjectURL(obj.files.item(0));
  8. return url;
  9. }
  10.  
  11. export default {
  12. name: 'accident',
  13. // 定义数据
  14. data () {
  15. return {
  16. imgNum:4, //上传的照片数量,可根据实际情况自定义
  17. }
  18. },//定义事件
  19. methods:{
  20. //根据点击上传按钮触发input
  21. change_input(){
  22. let inputArr=$('#addTextForm input');
  23. let add_inputId=''; //需要被触发的input
  24. for(let i=0;i<inputArr.length;i++){
  25. // 根据inputvalue值判断是否已经选择文件
  26. if(!inputArr[i].value){ //如果没有选择,获得这个inputID
  27. add_inputId=inputArr[i].id;
  28. break;
  29. }
  30. }
  31. if(add_inputId){ //如果需要被触发的input ID存在,将对应的input触发
  32. return $("#"+add_inputId).click();
  33. }else{
  34. alert("最多选择"+this.imgNum+"张图片")
  35. }
  36. },
  37. //input选择了图片的时候触发,将获得的src赋值到相对应的img
  38. setImg(e){
  39. let target=e.target;
  40. $('#img_'+target.id).attr('src',getFileUrl(e.srcElement));
  41. },
  42. //点击图片删除该图片并清除相对的input
  43. deleteImg(e){
  44. let target=e.target;
  45. let inputID=''; //需要清除valueinput
  46. if(target.nodeName=='IMG'){
  47. target.src='';
  48. inputID=target.id.replace('img_',''); //获得需要清除valueinput
  49. $('input#'+inputID).val("");
  50. }
  51. },
  52. //提交信息到后台
  53. submit(){
  54. $("#addTextForm").ajaxSubmit({
  55. url: this.$root.api+"/Index/staff_accident/add",
  56. type: "post",
  57. data: {
  58. 'total_price':this.price,
  59. 'descript':this.descript,
  60. },
  61. success: (data) => {
  62. if(data.code==0){
  63. console.log(‘提交成功’);
    $("#addTextForm input").val('');

$('div#img-wrapper img').attr('src','');

  1. }else{
  2. alert('提交失败');
  3. }
  4. }
  5. });
  6. }
  7. },
  8. //页面加载后执行
  9. mounted(){
  10. for(let i=0;i<this.imgNum;i++){
  11. //生成input框,默认为1
  12. let my_input = $('<input type="file" name="image" />'); //创建一个input
  13. my_input.attr('id',i); //为创建的input添加id
  14. $('#addTextForm').append(my_input); //将生成的input追加到指定的form
  15. //生成img,默认为1
  16. let my_img = $('<img src="">');
  17. my_img.attr('id', 'img_'+i);
  18. my_img.css({"max-width":"50%","max-height":"200px"}); //添加样式,由于vue的执行机制,页面加载的时候img标签还没有生成,直接写在style样式会不生效
  19. $('#img-wrapper').append(my_img);
  20. }
  21. },
  22. }
  23. </script>
 
 

基于VUE选择上传图片并在页面显示(图片可删除)的更多相关文章

  1. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  2. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  3. 关于springmvc 只能在index.jsp页面显示图片的处理办法jsp页面无法显示图片

    首先,已经配置好了mvc对静态资源的处理 只有index,jsp可以显示图片 其他页面同样的代码则不显示 后来折腾了半天,发现 index是static的父目录的级别文件 可以向下访问 但是其他的js ...

  4. 基于Vue的SPA如何优化页面加载速度

    常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使 ...

  5. 【Vue中的坑】vue项目中动态绑定src不显示图片解决方法

    v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染 ...

  6. spring mvc页面显示图片失败

    在配置文件中需要映射静态资源 <!-- 当在web.xml 中 DispatcherServlet使用 <url-pattern>/</url-pattern> 映射时, ...

  7. [YII2] 展示页面显示图片 以及手机号隐藏为*和姓名隐藏姓为*,

  8. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  9. day112:MoFang:种植园使用websocket代替http&服务端基于flask-socketio提供服务&服务端响应信息&种植园页面显示初始化

    目录 1.种植园使用websocket代替http 2.服务端基于socket提供服务 3.服务端响应信息 4.种植园页面展示 1.种植园使用websocket代替http 我们需要完成的种植园,是一 ...

随机推荐

  1. Macaca环境搭建踩坑总结

    1.使用命令 npm i macaca-android -g 安装一直不成功,使用Macaca  doctor 一直没有显示出android C:\Users\ABC>npm i macaca- ...

  2. JavaScript调试技巧

    熟悉工具可以让工具在工作中发挥出更大的作用.尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug. 文中已经列出了14个你可能不知道的调试技巧,但是 ...

  3. kafka资料

    https://www.cnblogs.com/the-tops/p/5685955.html

  4. 有关opacity或RGBA设置颜色值及元素的透明值

    opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化   opacity声明来 ...

  5. mysql 错误信息

    1 连接MySQL错误:Can't connect to MySQL server (10060) link:>>>  http://blog.csdn.net/testcs_dn/ ...

  6. [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中

    百度网盘下载地址:https://pan.baidu.com/s/1kULNXOF 优酷土豆观看地址:http://v.youku.com/v_show/id_XMzAwNTY2MTE0MA==.ht ...

  7. 漫话JavaScript与异步·第三话——Generator:化异步为同步

    一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...

  8. python3基础(一)

    1. python文件主程序入口文件一般来要申明python路径,编码信息,作者说明等: #!/usr/bin/env python # _*_ coding: utf-8 _*_ # Author: ...

  9. asp.net core 2.0 查缺补漏

    asp.net core 2.0 一些有用有趣的设置. 面向(targeting)不同的.net版本: 打开asp.net core 2.0的项目文件: xxx.csproj, 这部分: <Pr ...

  10. 使用阿里云镜像maven管理配置开发环境

    修改方法:在~/.m2目录下的settings.xml文件中,(如果该文件不存在,则需要从maven/conf目录下拷贝一份),找到<mirrors>标签,添加如下子标签: <mir ...