基于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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 决策树算法的应用python实现_python怎么画出决策树的分支

    决策树算法的应用python实现_python怎么画出决策树的分支决策数(DecisionTree)在机器学习中也是比较常见的一种算法,属于监督学习中的一种。看字面意思应该也比较容易理解,相比其他算法比如支持向量机(SVM)或神经网络,似乎决策树感觉“亲切”许多。优点:计算复杂度不高,输出结果易于理解,对中间值的缺失值不敏感,可以处理不相关特征数据。缺点:可能会产生过度匹配的问题。使用数据类型:数值型和标称型。简单介绍完毕,让我们来通过一个例子让决策树“

    2022年9月8日
    2
  • 识别手写数字的神经网络_基于神经网络的数字分类

    识别手写数字的神经网络_基于神经网络的数字分类神经网络之手写数字文章目录神经网络之手写数字00.写在之前01.代码框架02.开始做一些准备工作03.框架的开始04.训练模型构建05.手写数字的识别06.想看源码的同学戳这里07.思考首先鼓掌,又是一个有收获的五一小假期,想前年五一出门旅游,去年五一疫情在家写了爬虫【就是我博客里的那个口袋妖怪】,这个五一就写了一个神经网络。代码参考学习于python神经网络编程这本书。实话实说,这本书看了好几次,之前打算写来着,但不知道为什么总是不敢轻易尝试,今天把五一的任务的任务都完成了,早上就想

    2022年9月14日
    4
  • tabnine激活码(注册激活)

    (tabnine激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlS32PGH0SQB-eyJsaWNlbnNlSWQi…

    2022年3月26日
    40
  • 已知前序遍历和中序遍历求二叉树[通俗易懂]

    已知前序遍历和中序遍历求二叉树[通俗易懂]描述输入某二叉树的前序遍历和中序遍历的结果,请输出后序遍历序列。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6},重建二叉树并返回后序遍历序列输入输入某二叉树的前序遍历和中序遍历的结果输出输出后序遍历序列输入样例1 12473568…

    2022年9月10日
    2
  • Mybatis使用concat函数

    Mybatis使用concat函数开发时遇到一个需求,用户角色存在变更,使用关联关系浪费空间,于是想到使用在数据库字段中存放字符串,以,分割,这样获取到数据之后使用AuthorityUtils.commaSeparatedStringToAuthorityList(param)即可将用户角色转成list集合,数据库中字段信息如下如图所示,用户role字段对应用户角色信息,但是用户角色可能会添加也可能会删除某个角色,当然查出来利…

    2022年6月5日
    191
  • 监督学习、无监督学习、自监督学习和强化学习

    监督学习、无监督学习、自监督学习和强化学习监督学习监督学习是目前最常见的机器学习类型。给定一组样本(通常由人工标注),他可以学会将输入数据映射到已知目标。一般来说,近年来过度关注的深度学习应用几乎都属于监督学习,比如光学字符识别、语音识别、图像分类和语言翻译。监督学习主要包括分类和回归,但还有更多的奇特变体,主要包括如下几种:1、序列生成(sequencegeneration)。给定一张图像,预测描述图像的文字。序列生成有时可…

    2022年9月14日
    3

发表回复

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

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