基于VUE选择上传图片并在页面显示(图片可删除)

基于VUE选择上传图片并在页面显示(图片可删除)

demo例子:

基于VUE选择上传图片并在页面显示(图片可删除)

 

依赖文件 :

 

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>
复制代码

 

 
 
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113773.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 分布式爬虫部署[通俗易懂]

    分布式爬虫部署[通俗易懂]【服务器端】1.下载redis,RedisDesktopManagerredis。2.修改配置文件(找到redis下的redis.windows.conf双击打开,找到bind并修改为0.0.0.0,然后protected-mode“no”3.打开cmd命令行进入redis的安装目录,输入redis-server.exeredis.windows.conf回车,保持程序一直开着。如果不是这个界面,证明redis服务已经开启了,需要redis-clishutdow

    2025年7月17日
    4
  • 微型计算机的性能主要取决于多选,广东计算机一级考试试题

    微型计算机的性能主要取决于多选,广东计算机一级考试试题广东计算机一级考试试题53、在word的哪种视图方式下,可以显示分页效果()A、普通B、大纲C、页面*D、主控文档54、在word的编辑状态,连续进行了两次”插入”操作,当单击一次”撤消”按钮后()A、将两次插入的内容全部取消B、将第一次插入的内容全部取消C、将第二次插入的内容全部取消*D、两次插入的内容都不被取消55、在WINDOW95中,若在某一文档中连续进行了多次剪切操作,当关…

    2022年6月28日
    25
  • VS2013密钥

    VisualStudioUltimate2013KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9VisualStudioPremium2013KEY(密钥):FBJVC-3CMTX-D8DVP-RTQCT-92494VisualStudioProfessional2013KEY(密钥):XDM3T-W3T3V-MGJWK-8BFVD-G…

    2022年4月4日
    52
  • ubuntu开机进入tty1_ubuntu tty模式

    ubuntu开机进入tty1_ubuntu tty模式1、一个作为宿主机的Linux;本文使用的是RedhatEnterpriseLinux5.4;2、在宿主机上提供一块额外的硬盘作为新系统的存储盘,为了降低复杂度,这里添加使用一块IDE接口的新硬盘;3、Linux内核源码,busybox源码;本文使用的是目前最新版的linux-2.6.34.1和busybox-1.16.1。说明:本文是一个stepbystep的…

    2022年8月12日
    7
  • clion永久激活码(JetBrains全家桶)

    (clion永久激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlML…

    2022年3月21日
    255
  • centos7.4安装docker_docker打包python应用

    centos7.4安装docker_docker打包python应用前言当我们在一台电脑上搭建了python3.6的环境,下次换台电脑,又得重新搭建一次,设置环境变量等操作。好不容易安装好,一会提示pip不是内部或外部命令,一会又提示pip:commandno

    2022年7月29日
    10

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号