zoukankan      html  css  js  c++  java
  • js 上传图片

    <div class="block-input" style="height: 90px">
          <span><i class="red">*</i>上传图片:</span>
          <div class="img-area" v-for="(img,index) in imgs" :key="index">
            <img :src="img" style=" 79px;height: 70px;" @click="showBig(img)"/>
            <a class="remove-log" @click="removeLog(img)">x</a>
          </div>
    
          <input type="file" id="pfile" accept="image/gif, image/jpeg,image/png, image/bmp" @change="getPhoto" style="display: none"/>
          <button  @click="getFile" v-show="isShowBtn" class="button">报表图片</button>
        </div>
        <div v-if="showImg" class="showImg-box">
          <div class="showImg-mask"  @click="hiddenImg"></div>
          <img :src="chooseImg" style="max-height:400px;max- 80%;"/>
        </div>
    getFile () {
            document.getElementById('pfile').click()
          },
          getPhoto () {
            let pfile = document.getElementById('pfile')
            let f = pfile.files[0]
            let imgVal = pfile.value
            let fileName = imgVal.substring(imgVal.lastIndexOf('.') + 1).toLowerCase()
            if (fileName !== 'jpg' && fileName !== 'jpeg' && fileName !== 'PNG' && fileName !== 'png' && fileName !== 'bmp' && fileName !== 'gif') {
              alert('不支持该格式的文件!')
              return false
            }
            if (f.size > 1024 * 1024 * 10) {
              alert('上传图片大小不能大于10M!')
              return false
            }
            var fReader = new FileReader()
            fReader.readAsDataURL(f)
            fReader.onload = (e) => {
              let res = fReader.result
              this.imgs.push(res)
              if (this.imgs.length === 1) {
                this.isShowBtn = false
              }
            }
          },
          removeLog (img) {
            this.imgs.pop()
            let upimgs = this.imgs
            for (let i = 0; i < upimgs.length; i++) {
              if (img === upimgs[i]) {
                upimgs.splice(i, 1)
                return
              }
            }
            if (upimgs.length < 1) {
              this.isShowBtn = true
              this.imgs = []
            }
          },
          showBig (img) {
            this.chooseImg = img
            this.showImg = true
          },
          hiddenImg () {
            this.showImg = false
          },
  • 相关阅读:
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    表单
    列表、表格与媒体元素
    HTML5基础
  • 原文地址:https://www.cnblogs.com/arealy/p/11052113.html
Copyright © 2011-2022 走看看