原生JS文件上传

发表于 | 分类于

最近整了一个图片上传的东西，由于上传的时候还需要上传其它的参数，所以用原生JS整了一套。结合Vue.
第一步：
用input标签，用作图片上传

1
2
3
4
5
6
7
8

<input
    class="uploadInput"
    name="txtName"
    type="file"
    @change="loadImage(this)"
    ref="file"/>

用img标签用作图片的展示

1
2
3
4
5

<div class="img_wrapper">
      <img :src="curUserMsg.portrait">
</div>

数据提交

1
2
3
<div class="btn_wrapper">
   <button @click="submit" type="button">提交</button>
</div>

第二步：
数据初始化

1
2
3
4
5
6
7
8
9
10

data(){
  return{
      imageFile:"",
      curUserMsg:{
          "portrait":""
      }
  }
}

第三步：
JS 处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

submit:function(){
   //提交上传的图片信息
   let imgFile=this.imageFile.files[0];
   if(imgFile){
      console.log("提交的图片信息",imgFile);
   }else{
     console.log("请先上传图片")
   }
},
loadImage:function(){
    var img=this.$refs.file;
    this.imageFile=this.$refs.file;
    console.log("图片信息",img);
    console.log("图片路径",img.value);
    console.log("图片信息",img.files);
    var filePath = img.value;
    var fileExt = filePath.substring(filePath.lastIndexOf("."))
            .toLowerCase();

    if (!this.checkFileExt(fileExt)) {
        alert("您上传的文件不是图片,请重新上传！","warning");
        img.value = "";
        return;
    }
    if (img.files && img.files[0]) {
//                alert(img);
//                alert(img.files[0])

        console.log('你选择的文件大小' + (img.files[0].size / 1024).toFixed(0) + "kb");
        //长传的图片的大小的拦截
        if((img.files[0].size / 1024).toFixed(0)>100){
            alert("上传的头像不能大于100Kb","error");
            img.value = "";
            return;
        }
//                var xx = img.files[0];
//                for (var i in xx) {
//                    alert(xx[i])
//                }
        console.log("上传成功",filePath);
        this.curUserMsg.portrait=this.getObjectURL(img.files[0]);
        console.log('上传成功的头像',this.curUserMsg.portrait);
    } else {
        img.select();
        var url = document.selection.createRange().text;
        try {
            var fso = new ActiveXObject("Scripting.FileSystemObject");
        } catch (e) {
            console.log('如果你用的是ie8以下 请将安全级别调低！');
        }
        console.log("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
    }
},
 checkFileExt:function(ext) {
    if (!ext.match(/.jpg|.png|.jpeg/i)) {
        return false;
    }
    return true;
},
//图片预览
getObjectURL:function(file) {
    var url = null;
    if (window.createObjectURL != undefined) { //
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
        //仅简单的验证仅如下的浏览器支持 webkit or chrome ie11 ie10 firefox oprea
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
  }
})


PS：如果想用手动唤起图片的上传，可以通过点击事件

1
2
3
4
5
toUploadImg:function(){
      console.log("上传图片");
     $(".uploadInput").click();
  }