记一个js图片上传小插件
2016-09-04 / 程小刚   

最近在做的项目中需要一个图片上传的小控件,由于用的功能不多,索性自己写一个得了.

需求分析

我需要做一个能选择图片文件,进行预览,还能删除图片,选择查看图片大图.

html文档结构

由js生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="big_img_wrap">
<img id="bigImg" class="big_img" src="" />
<!-- 浏览大图 -->
</div>
<div style="height:10px;width:100%;"></div>
<div id="selPhotoList" class="selphoto_list">
<!-- 选择的照片列表 -->
<div class="thumb_wrp">
<!-- 缩略图 -->
<div class="photo_input_wrp">
<!-- 选择框 -->
<div class="photo_input_hline"></div>
<!-- 选择框中间的横线 -->
<div class="photo_input_vline"></div>
<!-- 选择框中间的竖线 -->
<input name="" type="file" class="photo_input" value="" accept="image/*" />
<!-- 存放选择的文件 -->
<input name="" type="hidden" value="" />
<!-- 存放文件名 -->
</div>
</div>
</div>

css样式

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
<style type="text/css">
.big_img_wrap {
width: 500px;
min-height: 100px;
border: 1px solid black;
}

.big_img {
width: 100%;
}

.thumb_wrp {
position: relative;
width: 77px;
height: 77px;
float: left;
margin-right: 10px;
}

.photo_input_wrp {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
border: 1px solid gray;
}

.photo_input_wrp:active {
opacity: 1;
}

.photo_input_hline {
width: 50%;
height: 2px;
top: 50%;
left: 25%;
}

.photo_input_vline {
width: 2px;
height: 50%;
top: 25%;
left: 50%;
}

.photo_input_hline,
.photo_input_vline {
position: absolute;
background-color: #C7C7C6;
}

.photo_input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}

.thumb_img {
position: absolute;
border: 1px solid black;
width: 100%;
height: 100%;
background-color: white;
}

.del_img_btn {
position: absolute;
top: 0;
left: 100%;
transform: translate(-8px, -8px);
width: 16px;
height: 16px;
z-index: 1;
color: blue;
line-height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
border-radius: 50%;
background: blue;
color: white;
opacity: 0.8;
}
</style>

js动态生成

首先引入jquery,查看效果点击 点击这里
在提交表单时,
选择的图片为:name=“photo[i]”,对应的图片名为:name=“photoNames[i]”,i 是图片的添加顺序

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
var selectPhotoArea = new PhotoSelect($("#selectPhotoArea"));
//创建图片选择区域
function PhotoSelect(photoSelectArea) {
var photoNumMax = 4;//设置最多选择的图片数

this.checkPhoto=function(){
var photoLength = $(".thumb_wrp").length;
if((photoLength-1) == 0){
alert("请选择图片!");
return false;
}
return true;
}

init();
function init(){
var html = "";
html += '<div class="big_img_wrap">'+
'<img id="bigImg" alt="请选择图片" class="big_img" src="" />'+
'</div>'+
'<div style="height:10px;width:100%;"></div>'+
'<div id="selPhotoList" class="selphoto_list">'+
'</div>';
$(photoSelectArea).append(html);

createThumbWrp();
}

function createThumbWrp() {
var html = "";
html +=
'<div class="thumb_wrp">' +
'<div class="photo_input_wrp">' +
'<div class="photo_input_hline"></div>' +
'<div class="photo_input_vline"></div>' +
'<input name="" type="file" class="photo_input" value="" accept="image/*" />' +
'<input name="" type="hidden" value="" />' +
'</div>' +
'</div>';
$("#selPhotoList").append(html);
$("#selPhotoList .photo_input:last").on("click", function(e) {
var photoLength = $(".thumb_wrp").length;
if(photoLength > photoNumMax) {
e.preventDefault();
return false;
}
});
$("#selPhotoList .photo_input:last").on("change", function(e) {
selPhoto(this);
});
}

function previewPhoto(el) {
var html = '';
var src = "";
var file = el.files[0];
var reader = new FileReader();
reader.onloadend = function() {
src = reader.result;
html += '<img class="thumb_img" src="' + src + '" />';
html += '<div class="del_img_btn">×</div>';
$(el).parent().parent().append(html);
$(el).siblings("input[type=hidden]").val(el.value);
$(el).parent().parent().find(".thumb_img").on("click", function(e) {
setCurrentPhoto(this);
});
$(el).parent().parent().find(".del_img_btn").on("click", function(e) {
delPhoto(this);
});
setCurrentPhoto($(el).parent().siblings(".thumb_img")[0]);
refreshPhotoName();
refreshMsg();
}
if(file) {
reader.readAsDataURL(file);
} else {
src = "";
}
}

function setCurrentPhoto(el) {
if(el) {
var el = $(el);
var src = el.attr("src");
$("#bigImg").attr("src", src);
$(".thumb_img").css("border", "1px solid black");
el.css("border", "1px solid red");
} else {
$("#bigImg").attr("src", "");
}
}

function refreshPhotoName() {
$("#selPhotoList").find("input[type=file]").each(function(index) {
var photoUrl = $(this).val();
if(photoUrl) {
$(this).attr("name", "photos[" + index + "]");
$(this).next("input[type=hidden]").attr("name", "photoNames[" + index + "]");
} else {
$(this).attr("name", "");
$(this).next("input[type=hidden]").attr("name", "");
}
});
}

function refreshMsg() {
var photoLength = $(".thumb_wrp").length;
var html = (photoLength - 1) + "/" + photoNumMax;
$("#selphoto_message").html(html);
}

function delPhoto(el) {
$(el).parent().remove();
var thumbs = $(".thumb_wrp");
var len = thumbs.length;
setCurrentPhoto($(".thumb_img")[0]);
refreshPhotoName();
refreshMsg();
}

function selPhoto(el) {
var photoUrl = el.value;
var photoLength = $(".thumb_wrp").length;
if(!photoUrl) {
return false;
}
if(photoLength > photoNumMax) {
return false;
}
previewPhoto(el);
createThumbWrp();
}

}
本文遵循 CC BY-NC-SA 4.0 许可协议
本文链接:http://www.niemingzhao.top/2016/09/04/记一个js图片上传小插件/