首页 > Web开发 > 详细

input type=“file” 选择特定的文件格式 进行上传

时间:2019-07-26 11:14:12      阅读:108      评论:0      收藏:0      [点我收藏+]
<input id="addImg"
                     type="file"
                     @change="getFileToPicture($event)"
                     multiple="multiple"
                     accept=".jpeg, .png" />   

 getFileToPicture (event) {
      let file = event.target.files[0]
      console.log(file)
      // 判断文件类型   如果是jpg、png 则支持上传。否则 中断并提示
      if (file.type !== ‘image/png‘ && file.type !== ‘image/jpg‘) {
        alert(‘上传的图片仅支持 png/jpg 格式‘)
        file.value = ‘‘
        return
      }
      let freader = new FileReader()
      if (file.size > 1024 * 1024 * 20) {
        alert(‘上传的图片大小超过20M‘)
        file.value = ‘‘
        return
      }
      this.imgName = file.name
      this.imgFile = event.target.files
      freader.readAsDataURL(file)// 读取照片
      let _this = this
      freader.onload = (e) => { // 读取成功
        event.srcElement.value = ‘‘ // 清除路径
        _this.info.PHOTO = freader.result
      }
    }

因为  accept 属性 各浏览器的支持情况不同,所以  前端需要对 file的类型再进行一次格式判断

input type=“file” 选择特定的文件格式 进行上传

原文:https://www.cnblogs.com/theMilkyWay/p/11248796.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!