input file上传图片预览

最新推荐文章于 2021-06-19 10:23:59 发布

IT_ZGC

最新推荐文章于 2021-06-19 10:23:59 发布

阅读量680

点赞数

分类专栏： h5开发文章标签： img input 前端展示

h5开发专栏收录该内容

6 篇文章

订阅专栏

这里写图片描述

下载地址http://download.youkuaiyun.com/detail/cometwo/9383602

兄弟文章：http://blog.youkuaiyun.com/libin_1/article/details/50916704

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的非常非常非常非常非常非常简单！

点击红框是加载显示图片，X号删除，蓝框是自动在后面添加添加图片框，所有的都是原创，代码其实可以更加精简，看终结版文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <style type="text/css">
        .imgbox,.imgbox1
        {
            float: left;
            margin-right: 20px;
            margin-top: 20px;
            position: relative;
            width: 182px;
            height: 142px;
            border: 1px solid red;
            overflow: hidden;
        }
        .imgbox1{border: 1px solid blue;
        }


        .imgnum{
            left: 0px;
            top: 0px;
            margin: 0px;
            padding: 0px;
        }
        .imgnum input,.imgnum1 input {
            position: absolute;
            width: 182px;
            height: 142px;
            opacity: 0;
        }
        .imgnum img,.imgnum1 img {
            width: 100%;
            height: 100%;
        }
        .close,
        .close1 {
            color: red;
            position: absolute;
            left: 170px;
            top: 0px;
            display: none;
        }





    </style>
</head>

<body>
<div id="img">
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div><div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>
<div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>  <div class="imgbox">
    <div class="imgnum">
        <input type="file" class="filepath" />
        <span class="close">X</span>
        <img src="btn.png" class="img1" />
        <img src="" class="img2" />
    </div>
</div>



<div class="imgbox1">
    <div class="imgnum">
        <input type="file" class="filepath1" />
        <span class="close1">X</span>
        <img src="btn.png" class="img11" />
        <img src="" class="img22" />
    </div>
</div>

</div>

</body>
<script type="text/javascript">
    $(function() {
        $(".filepath").on("change",function() {
            alert($('.imgbox').length);
            var srcs = getObjectURL(this.files[0]);   //获取路径
            $(this).nextAll(".img1").hide();   //this指的是input
            $(this).nextAll(".img2").show();  //fireBUg查看第二次换图片不起做用
            $(this).nextAll('.close').show();   //this指的是input
            $(this).nextAll(".img2").attr("src",srcs);    //this指的是input
            $(this).val('');    //必须制空
            $(".close").on("click",function() {
                $(this).hide();     //this指的是span
                $(this).nextAll(".img2").hide();
                $(this).nextAll(".img1").show();
            })
        })
    })




    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    };





    $(function() {
        $("#img").on("change",".filepath1",function() {
            //alert($('.imgbox1').length);
            var srcs = getObjectURL(this.files[0]);   //获取路径
            alert(srcs);
            //this指的是input
            /* $(this).nextAll(".img22").attr("src",srcs);    //this指的是input
             $(this).nextAll(".img22").show();  //fireBUg查看第二次换图片不起做用*/
            var htmlImg='<div class="imgbox1">'+
                    '<div class="imgnum1">'+
                    '<input type="file" class="filepath1" />'+
                    '<span class="close1">X</span>'+
                    '<img src="btn.png" class="img11" />'+
                    '<img src="'+srcs+'" class="img22" />'+
                    '</div>'+
                    '</div>';

            $(this).parent().parent().before(htmlImg);
            $(this).val('');    //必须制空
            $(this).parent().parent().prev().find(".img11").hide();   //this指的是input
            $(this).parent().parent().prev().find('.close1').show();

            $(".close1").on("click",function() {
                $(this).hide();     //this指的是span
                $(this).nextAll(".img22").hide();
                $(this).nextAll(".img11").show();
                if($('.imgbox1').length>1){
                    $(this).parent().parent().remove();
                }

            })
        })
    })

</script>

</html>
     
     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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
     
     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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

问题
加入我们在 HTML 里面有一个图片上传控件：

注意这个 accept=”image/*” 非常重要，它指定了上传的是图片，在移动端的时候会关联到系统的弹窗选择类型等问题，务必加上。

然后，问题是，我们在没有提交这个表单到服务器之前，有没有办法把图片的内容读取出来呢？

看似简单，都是客户端的文件，应该是可以的，但在之前确实没什么好办法，但是自从我们有了 HTML5

例子说明问题
复制代码

$(function() {
  $('#upload_image').change(function(event) {
    // 根据这个 <input> 获取文件的 HTML5 js 对象
    var files = event.target.files, file;        
    if (files && files.length > 0) {
      // 获取目前上传的文件
      file = files[0];
      // 来在控制台看看到底这个对象是什么
      console.log(file);
      // 那么我们可以做一下诸如文件大小校验的动作
      if(file.size > 1024 * 1024 * 2) {
        alert('图片大小不能超过 2MB!');
        return false;
      }
      // !!!!!!
      // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
      // 获取 window 的 URL 工具
      var URL = window.URL || window.webkitURL;
      // 通过 file 生成目标 url
      var imgURL = URL.createObjectURL(file);
      // 用这个 URL 产生一个 <img> 将其显示出来
      $('body').append($('<img/>').attr('src', imgURL));
      // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
      // URL.revokeObjectURL(imgURL);
    }
  });
});
     
     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
     
     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

复制代码
简要说明
简单来说整个操作设计如下几步：

通过的 change 事件触发事件，并且获取 event 对象；
通过 event 对象获取上传的文件的 js 对象 file ；
通过 window.URL 工具从 file 对象生成一个可用的 URL；
把这个 URL 置入使用；
*释放这个 URL 的伺服
关键点：

对于同一个 file ，每次调用 URL.createObjectURL 的时候，都会重新生成一个不同的 URL；
调用 URL.createObjectURL 的时候，浏览器自动在内存中开辟空间，用于伺服这个 URL，也就是使得这个 URL 可以请求成功；
如果调用了 URL.revokeObjectURL(imgURL); 之后，这个伺服就会关掉，再请求这个 URL 就会 404；
这一切都是客户端的事情，服务器端对此一无所知，包括你选择的这个图；
这个 imgURL 大概是这个样子：blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb