图片上传预览

发表于   |   分类于   |  

本周帮一哥们写了一个页面遇到了一些问题，特此记录一下。主要遇到的问题是图片上传预览（多个上传控件）、多个颜色选择，遇到了冲突。

来个效果一撇 2016-08-01 00.13.22.png

一、这是代码上传的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
<div id="home11" class="tab-pane in active lowerContent ">
									<div class="tool floatLeft">
										<span class="spanStylef floatLeft">名称</span>
										<input type="text" name="appName">
									</div>
									<div class="upImage floatLeft">
										<div class="tool floatLeft">
											<span class="spanStylef floatLeft">默认图标</span>
											<a href="javascript:;" class="file" onchange="javascript:setImagePreview(2);">上传图片
												<input type="file" name="imagereview2" class ="inputImages">
											</a>
										</div>
										<div class="tool floatLeft">
											<span class="spanStylef floatLeft">&nbsp</span>
											<img class="imagereview2" width="100" height="100" />
										</div>
									</div>
									<div class="upImage floatLeft">
										<div class="tool floatLeft">
											<span class="spanStylef floatLeft">触及图标</span>
											<a href="javascript:;" class="file" onchange="javascript:setImagePreview(3);">上传图片
												<input type="file" name="imagereview3" class ="inputImages">
											</a>
										</div>
										<div class="tool floatLeft">
											<span class="spanStylef floatLeft">&nbsp</span>
											<img class="imagereview3" width="100" height="100" />
										</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
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    text-decoration: none;
}

三、这是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
function setImagePreview(avalue) {
               //input
               var docObjs = document.getElementsByClassName("inputImages");
               var docObj = docObjs[avalue];
               if (docObj.files && docObj.files[0]) {
                   var imgObjPreviews = document.getElementsByClassName(docObj.name);
                   var imgObjPreview = imgObjPreviews[0];
               if (avalue == 0) {
                   imgObjPreview.style.display = 'block';
                   imgObjPreview.style.width = '200px';
                   imgObjPreview.style.height = '350px';
               }else {
                   //火狐下，直接设img属性
                   imgObjPreview.style.display = 'block';
                   imgObjPreview.style.width = '100px';
                   imgObjPreview.style.height = '100px';
               }
                  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
               } else {
                   //IE下，使用滤镜
                   // docObj.select();
                   // var imgSrc = document.selection.createRange().text;
                   // var localImagId = document.getElementById("localImag");
                   // //必须设置初始大小
                   // localImagId.style.width = "100px";
                   // localImagId.style.height = "100px";
                   // //图片异常的捕捉，防止用户修改后缀来伪造图片
                   // try {
                   //     localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                   //     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                   // } catch(e) {
                   //     alert("您上传的图片格式不正确，请重新选择!");
                   //     return false;
                   // }
                   // imgObjPreview.style.display = 'none';
                   // document.selection.empty();
               }
               return true;
           }

问题与解决：
问题一：是上传按钮默认的文件上传是这样的
默认 2016-08-01 00.26.51.png
但是我需要的是这样的：

目标 2016-08-01 00.28.07.png
解决方案：就是将fileAPI放在你需要的控件上面，然后将fileAPI设置为透明，然后点击你需要的控件其实就是点击了fileAPI。还有一个方案就是用js:将你的控件的点击事件里面的返回为fileAPI的事件。这样点击你的控件就完成了fileAPI事件了，（我想的，没有去实现喔）
问题二：点击事件冲突
一开始我是通过id选择器来标记image与input的,后来发现多个上传按钮就需要多个js判定，会有很多的重复代码。于是后来我改为了用类选择器但是类名一样无法将image与input对应。于是我将input的name与与image的类名写成一样，通过input的name找到对应的image。

#########NOTE：我刚刚开始学习前端开发，很多不懂，如有错误。请亲们一定要指出啊！