<html>
2 <head>
3 <title>上传头像</title>
4 <script src="~/Scripts/jquery-1.7.1.min.js"></script>
5 <style type="text/css">
6 .file-box
7 {
8 position: relative;
9 340px;
10 }
11
12 button
13 {
14 background-color: #FFF;
15 border: 1px solid #CDCDCD;
16 80px;
17 }
18
19 .file
20 {
21 position: absolute;
22 top: 0;
23 left: -2px;
24 filter: alpha(opacity:0);
25 opacity: 0;
26 80px;
27 border: solid thin red;
28 float: left;
29 }
30
31 #picArea
32 {
33 filter: alpha(opacity:50);
34 opacity: 0.5;
35 }
36
37 #showimg
38 {
39 300px;
40 margin: 0;
41 overflow: hidden;
42 margin: 10px;
43 float:left;
44 }
45
46 </style>
47 <script>
48 $(document).ready(function () {
49
50 var pic = document.getElementById('showimg');
51
52 $('#enlarge').click(function () {
53 pic.style.width = pic.width * 1.2;
54 pic.style.height = pic.height * 1.2;
55 });
56
57 $('#narrow').bind('click', function () {
58 pic.style.width = pic.width / 1.2;
59 pic.style.height = pic.height / 1.2;
60 });
61
62 $("l").bind("click", function () {
63
64 });
65
66 $("dextral").bind("click", function () {
67
68 });
69 $("artwork").bind("click", function () {
70 pic.style.width = 300 + 'px';
71 });
72
73 function viewMyPic(file) {
74 if (!file.value.match(/.jpg|.gif|.png|.bmp/i)) {
75 alert('图片格式无效！');
76 return false;
77 }
78 //var pic = document.getElementById('showimg');
79 if (window.FileReader) {//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
80 oFReader = new FileReader();
81 oFReader.readAsDataURL(file.files[0]);
82 oFReader.onload = function (oFREvent) { pic.src = oFREvent.target.result; };
83 }
84 else if (document.all) {//IE8-
85 file.select();
86 file.blur();
87 var path = document.selection.createRange().text;//IE下获取实际的本地文件路径
88 if (window.ie6) {
89 pic.src = path; //IE6浏览器设置img的src为本地路径可以直接显示图片
90 }
91 else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
92 pic.setAttribute("width", 0);
93 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + path + "")";
94 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片，要不会显示红xx
95 }
96 }
97 else if (file.files) {//firefox6-
98 if (file.files.item(0)) {
99 url = file.files.item(0).getAsDataURL();
100 pic.src = url;
101 }
102 }
103 if (pic.clientHeight >= 350) {
104 pic.style.height = pic.clientHeight + "px";
105 }
106 else {
107 pic.style.height = pic.clientHeight + "px";
108 pic.style.marginTop = parseInt((350 - pic.clientHeight) / 2) + 10 + "px";
109 }
110 if (pic.clientWidth >= 300) {
111 pic.style.width = 300 + "px";
112 }
113 else {
114 pic.style.width = pic.clientWidth + "px";
115 pic.style.marginLeft = parseInt((300 - pic.clientWidth) / 2) + "px";
116 }
117 }
118 });
119
120 </script>
121 </head>
122 <body>
123 <div id="center" style=" 600px; height: 500px; border: inset thin black; margin: 0 200px;">
124 <div class="file-box" style="margin: 10px;">
125 <button class='btn'>本地照片</button>
126 <input type="file" class="file" id="fileField" onchange="viewMyPic(this);" />
127 <button style="margin-left: 30px;">自拍头像</button>
128 <button style="margin-left: 30px;">相册照片</button>
129 </div>
130 <div>
131 <div id="show" style=" 350px; height: 440px; border: dotted thin green; float: left; margin: 10px;">
132 <span style="margin-left: 110px;">图片预览区</span>
133 <div id="picArea" style="height: 370px; 320px; overflow: hidden; margin: 10px; padding: 0;">
134 <img id="showimg" src="~/Images/1.jpg" />
135 </div>
136 <div>
137 <button id="enlarge" style="margin-left: 15px; 50px;">放大</button>
138 <button id="narrow" style="margin-left: 15px; 50px;">缩小</button>
139 <button id="l" style="margin-left: 15px; 50px;">左旋</button>
140 <button id="dextral" style="margin-left: 15px; 50px;">右旋</button>
141 <button id="artwork" style="margin-left: 15px; 50px;">原图</button>
142 </div>
143 </div>
144 <div id="headPic" style=" 205px; height: 280px; border: dashed thin green; margin-top: 50px; margin-left: 10px; float: left;">
145 <span style="margin-left: 60px;">个人头像</span>
146 <div>
147 <img src="~/Images/1.jpg" style=" 160px; height: 180px; border: outset thin gray; margin: 10px 20px;" />
148 </div>
149 <div style="margin-left: 12px; margin-top: 20px;">
150 <button style=" 180px;">保存头像</button>
151 </div>
152 </div>
153 </div>
154 </div>
155 </body>
156
157 </html>