这篇文章主要介绍了php+js实现的上传头像界面无跳转，示例中用到了iframe,需要的朋友可以参考下。

上传头像，界面无跳转的方式很多，我用的是加个iframe那种。下面直接上代码:

1. //route 为后端接口 
2. //upload/avatar　为上传的头像的保存地址 
3. //imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的，参照下面的js部分的代码 
4. //头像保存名称为uid.type，如1.jpg,2.png等 
5. //$user['avatar'] 用户如果上传过头像，该用户数据库中的avatar字段将赋予时间戳，否则为空 
6. <form target="iframe" enctype="multipart/form-data" action="route?imgurl=/upload/avatar/<?=$uid?>" method="post" id="upload_form"> 
7. <img class="thumb" src="<?php if($user['avatar']) echo $my_img; else echo '/view/img/100.png'; ?>" style="width:100px; height:100px;" /> 
8. <input type="file" name="file" size="28" /> 
9. <input type="submit" name="submit_file" value="确定" style="display: none;"/> 
10. </form> 
11. <iframe id="iframe" name="iframe" style="display: none;"></iframe> 

php:

1. $token = param('token'); 
2. $user = user_from_token($token); 
3. !$user AND exit("<p class='iframe_message' status='0'>$lang[user_not_exists]</p>"); 
4. //文件存储路径 
5. $file_path="./upload/avatar/"; 
6. //664权限为文件属主和属组用户可读和写，其他用户只读。 
7. if(is_dir($file_path) != TRUE) mkdir($file_path, 0664) ; 
8. //定义允许上传的文件扩展名 
9. $ext_arr = array("gif", "jpg", "jpeg", "png", "bmp"); 
10.  
11. if (emptyempty($_FILES) === false) { 
12. 　　//判断检查 
13. 　　$photo_up_size > 2097152 AND exit("<p class='iframe_message' status='0'>对不起，您上传的照片超过了2M</p>"); 
14. 　　$_FILES["file"]["error"] > 0 AND exit("<p class='iframe_message' status='0'>文件上传发生错误：".$_FILES["file"]["error"]."</p>"); 
15. 　　//获得文件扩展名 
16. 　　$temp_arr = explode(".", $_FILES["file"]["name"]); 
17. 　　$file_ext = array_pop($temp_arr); 
18. 　　$file_ext = trim($file_ext); 
19. 　　$file_ext = strtolower($file_ext); 
20. 　　//检查扩展名 
21. 　　if (in_array($file_ext, $ext_arr) === false) { 
22. 　　　　exit("<p class='iframe_message' status='0'>上传文件扩展名是不允许的扩展名</p>"); 
23. 　　} 
24. 　　//删除目录下相同前缀的文件 
25. 　　if($dh = opendir($file_path)) { 
26. 　　　　while(($file = readdir($dh)) !== false) { 
27. 　　　　　　$file_arr = $file.split('.'); 
28. 　　　　　　if($file_arr[0] == $user['uid']) unlink($file_path.$file); 
29. 　　　　} 
30. 　　} 
31. 　　//以uid重命名文件 
32. 　　$new_name = $user['uid'].".".$file_ext; 
33. 　　//将文件移动到存储目录下 
34. 　　move_uploaded_file($_FILES["file"]["tmp_name"], $file_path.$new_name); 
35. 　　//裁剪压缩图片 
36. 　　clip($file_path.$new_name, $file_path.$new_name, 0, 0, 100, 100); 
37. 　　clip_thumb($file_path.$new_name, $file_path.$new_name, 100, 100); 
38. 　　//向数据表写入文件存储信息以便管理 
39. 　　user_update($user['uid'], array('avatar'=>time())); 
40. 　　exit("<p class='iframe_message' status='1'>文件上传成功</p>"); 
41. } else { 
42. 　　exit("<p class='iframe_message' status='0'>无正确的文件上传</p>"); 
43. } 
44.  
45. <?php 
46.  
47. function ext($filename) { 
48. return strtolower(substr(strrchr($filename, '.'), 1)); 
49. } 
50.  
51. /* 
52. 实例： 
53. thumb(APP_PATH.'xxx.jpg', APP_PATH.'xxx_thumb.jpg', 200, 200); 
54.  
55. 返回： 
56. array('filesize'=>0, 'width'=>0, 'height'=>0) 
57. */ 
58. function thumb($sourcefile, $destfile, $forcedwidth = 80, $forcedheight = 80) { 
59. $return = array('filesize'=>0, 'width'=>0, 'height'=>0); 
60. $imgcomp = 10; 
61. $destext = ext($destfile); 
62. if(!in_array($destext, array('gif', 'jpg', 'bmp', 'png'))) { 
63. return $return; 
64. } 
65.  
66. $imgcomp = 100 - $imgcomp; 
67. $imginfo = getimagesize($sourcefile); 
68. $src_width = $imginfo[0]; 
69. $src_height = $imginfo[1]; 
70. if($src_width == 0 || $src_height == 0) { 
71. return $return; 
72. } 
73. $src_scale = $src_width / $src_height; 
74. $des_scale = $forcedwidth / $forcedheight; 
75.  
76. if(!function_exists('imagecreatefromjpeg')) { 
77. copy($sourcefile, $destfile); 
78. $return = array('filesize'=>filesize($destfile), 'width'=>$src_width, 'height'=>$src_height); 
79. return $return; 
80. } 
81.  
82. // 按规定比例缩略 
83. if($src_width <= $forcedwidth && $src_height <= $forcedheight) { 
84. $des_width = $src_width; 
85. $des_height = $src_height; 
86. } elseif($src_scale >= $des_scale) { 
87. $des_width = ($src_width >= $forcedwidth) ? $forcedwidth : $src_width; 
88. $des_height = $des_width / $src_scale; 
89. $des_height = ($des_height >= $forcedheight) ? $forcedheight : $des_height; 
90. } else { 
91. $des_height = ($src_height >= $forcedheight) ? $forcedheight : $src_height; 
92. $des_width = $des_height * $src_scale; 
93. $des_width = ($des_width >= $forcedwidth) ? $forcedwidth : $des_width; 
94. } 
95.  
96. switch ($imginfo['mime']) { 
97. case 'image/jpeg': 
98. $img_src = imagecreatefromjpeg($sourcefile); 
99. !$img_src && $img_src = imagecreatefromgif($sourcefile); 
100. break; 
101. case 'image/gif': 
102. $img_src = imagecreatefromgif($sourcefile); 
103. !$img_src && $img_src = imagecreatefromjpeg($sourcefile); 
104. break; 
105. case 'image/png': 
106. $img_src = imagecreatefrompng($sourcefile); 
107. break; 
108. case 'image/wbmp': 
109. $img_src = imagecreatefromwbmp($sourcefile); 
110. break; 
111. default : 
112. return $return; 
113. } 
114.  
115. $img_dst = imagecreatetruecolor($des_width, $des_height); 
116. $img_color = imagecolorallocate($img_dst, 255, 255, 255); 
117. imagefill($img_dst, 0, 0 ,$img_color); 
118. imagecopyresampled($img_dst, $img_src, 0, 0, 0, 0, $des_width, $des_height, $src_width, $src_height); 
119. //$tmpfile = $temp_path.md5($destfile); 
120. $tmpfile = $destfile; 
121. switch($destext) { 
122. case 'jpg': imagejpeg($img_dst, $tmpfile, $imgcomp); break; 
123. case 'gif': imagegif($img_dst, $tmpfile, $imgcomp); break; 
124. case 'png': imagepng($img_dst, $tmpfile, version_compare(PHP_VERSION, '5.1.2') == 1 ? 7 : 70); break; 
125. } 
126. $r = array('filesize'=>filesize($tmpfile), 'width'=>$des_width, 'height'=>$des_height);; 
127. copy($tmpfile, $destfile); 
128. //unlink($tmpfile); 
129. imagedestroy($img_dst); 
130. return $r; 
131. } 
132. /* 
133. * 图片裁切 
134. * 
135. * @param string $srcname 原图片路径(绝对路径/*.jpg) 
136. * @param string $forcedheight 裁切后生成新名称(绝对路径/rename.jpg) 
137. * @param int $sourcefile 被裁切图片的X坐标 
138. * @param int $destfile 被裁切图片的Y坐标 
139. * @param int $destext 被裁区域的宽度 
140. * @param int $imgcomp 被裁区域的高度 
141. clip('xxx/x.jpg', 'xxx/newx.jpg', 10, 40, 150, 150) 
142. */ 
143. function clip($sourcefile, $destfile, $clipx, $clipy, $clipwidth, $clipheight) { 
144. $getimgsize = getimagesize($sourcefile); 
145. if(emptyempty($getimgsize)) { 
146. return 0; 
147. } else { 
148. $imgwidth = $getimgsize[0]; 
149. $imgheight = $getimgsize[1]; 
150. if($imgwidth == 0 || $imgheight == 0) { 
151. return 0; 
152. } 
153. } 
154.  
155. if(!function_exists('imagecreatefromjpeg')) { 
156. copy($sourcefile, $destfile); 
157. return filesize($destfile); 
158. } 
159. switch($getimgsize[2]) { 
160. case 1 : 
161. $imgcolor = imagecreatefromgif($sourcefile); 
162. break; 
163. case 2 : 
164. $imgcolor = imagecreatefromjpeg($sourcefile); 
165. break; 
166. case 3 : 
167. $imgcolor = imagecreatefrompng($sourcefile); 
168. break; 
169. } 
170. //$imgcolor = imagecreatefromjpeg($sourcefile); 
171. $img_dst = imagecreatetruecolor($clipwidth, $clipheight); 
172. $img_color = imagecolorallocate($img_dst, 255, 255, 255); 
173. imagefill($img_dst, 0, 0, $img_color); 
174. imagecopyresampled($img_dst, $imgcolor, 0, 0, $clipx, $clipy, $imgwidth, $imgheight, $imgwidth, $imgheight); 
175. $tmpfile = $destfile; 
176. imagejpeg($img_dst, $tmpfile, 100); 
177. $n = filesize($tmpfile); 
178. copy($tmpfile, $destfile); 
179. return $n; 
180. } 
181.  
182. // 先裁切后缩略，因为确定了，width, height, 不需要返回宽高。 
183. function clip_thumb($sourcefile, $destfile, $forcedwidth = 80, $forcedheight = 80) { 
184. // 获取原图片宽高 
185. $getimgsize = getimagesize($sourcefile); 
186. if(emptyempty($getimgsize)) { 
187. return 0; 
188. } else { 
189. $src_width = $getimgsize[0]; 
190. $src_height = $getimgsize[1]; 
191. if($src_width == 0 || $src_height == 0) { 
192. return 0; 
193. } 
194. } 
195.  
196. $src_scale = $src_width / $src_height; 
197. $des_scale = $forcedwidth / $forcedheight; 
198.  
199. if($src_width <= $forcedwidth && $src_height <= $forcedheight) { 
200. $des_width = $src_width; 
201. $des_height = $src_height; 
202. $n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); 
203. return filesize($destfile); 
204. // 原图为横着的矩形 
205. } elseif($src_scale >= $des_scale) { 
206. // 以原图的高度作为标准，进行缩略 
207. $des_height = $src_height; 
208. $des_width = $src_height / $des_scale; 
209. $n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); 
210. if($n <= 0) return 0; 
211. $r = thumb($destfile, $destfile, $forcedwidth, $forcedheight); 
212. return $r['filesize']; 
213. // 原图为竖着的矩形 
214. } else { 
215. // 以原图的宽度作为标准，进行缩略 
216. $des_width = $src_width; 
217. $des_height = $src_width / $des_scale; 
218. $n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); 
219. if($n <= 0) return 0; 
220. $r = thumb($destfile, $destfile, $forcedwidth, $forcedheight); 
221. return $r['filesize']; 
222. } 
223. } 
224.  
225. ?> 

我们php中设置返回内容，会发现，在出现相应情况后，返回内容出现在页面的iframe中，所以我们设定了相应的class，以便前端获得返回内容，做出相应处理。clip(),clip_thumb()为裁剪图片函数，可压缩图片大小，裁取图片以左上角为起点，长宽为100的正方形。

js:

1. var jsubmit_file = jinput.filter('[name="submit_file"]'); 
2. var jfile = jinput.filter('[name="file"]'); 
3. var jiframe = $('#iframe'); 
4. var jthumb = $('.thumb'); 
5. var type = ''; 
6. jfile.on('change', function() { 
7. var path = jfile.val(); 
8. var file_arr = path.split('.'); 
9. type = file_arr[file_arr.length-1]; 
10. jsubmit_file.trigger('click'); 
11. }); 
12. jiframe.on('load', function() { 
13. var jiframe_message = $(window.frames['iframe'].document).find('.iframe_message'); 
14. if(jiframe_message.attr('status') != 0) { 
15. var url = this.contentWindow.location.href; 
16. var url_arr = url.split('='); 
17. jthumb.attr('src', url_arr[1] + '.' + type); 
18. } 
19. alert(jiframe_message.text()); 
20. }); 

这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能，网上有各种插件，虽然功能丰富，就是体积太大，这个看我们取舍了。

Tags: php+js iframe php上传头像

分享到：