php jquery 上传照片,上传后实时本页面预览

代码

 1  其实这个的主要部分并不是一个jquery，但是必须使用到 
 2  php程序部分，也只需要这个一个php程序就可以了 
 3  www . corange . cn亲测 
 4  <? php 
 5  header ( " Content-Type: text/html; charset=utf-8 " ); 
 6  @ header (  " Cache-Control: no-cache, must-revalidate "  ); 
 7  @ header (  " Pragma: no-cache "  ); 
 8  @ header (  " Last-Modified:  "   .   gmdate (  " D, d M Y H:i:s "  )  .   " GMT "  ); 
 9 
10  if ( $_GET [ ' act ' ] == ' upload ' ){ 
11  if ( $_POST [ ' upload ' ] == ' upload ' ){ 
12 
13  $updir   = ' upload/ ' ; 
14  $uploadfile   =   $uploaddir   .   basename ( $_FILES [ ' file ' ][ ' name ' ]); 
15 
16  $_FILES [ ' file ' ][ ' name ' ] = strtolower ( $_FILES [ ' file ' ][ ' name ' ]); 
17  $tmp_filename = explode ( " . " , $_FILES [ ' file ' ][ ' name ' ]); 
18  if ( $tmp_filename [( count ( $tmp_filename ) - 1 )] == ' jpg '   ||   $tmp_filename [( count ( $tmp_filename ) - 1 )] == ' jpeg ' ){ 
19  $up_filename = $updir . md5 ( $_FILES [ ' file ' ][ ' name ' ] . $_FILES [ ' file ' ][ ' size ' ]) . " . " . $tmp_filename [( count ( $tmp_filename ) - 1 )] ; 
20 
21  if ( move_uploaded_file ( $_FILES [ ' file ' ][ ' tmp_name ' ] , $up_filename )){ 
22  list ( $width ,   $height ,   $type ,   $attr )  =   getimagesize ( $up_filename ); 
23  $f1 = " <img src=' $up_filename ' id='ImageDrag' width='150'> " ; 
24  echo   ' <script language="javascript">parent.$("#ImageDragContainer").html(" ' . $f1 . ' ");</script> ' ; 
25  echo   " <script>parent.myform.bigpic.value=''</script> " ; // 修改时候直接替换掉原数据 
26  echo   " <script>parent.myform.bigpic.value+=' " , $up_filename , " , " , $width , " , " , $height , " '</script> " ; 
27  echo   " <script>location.href='?act=upload'</script> " ; exit ; 
28  } else { 
29  echo   " <script>alert('图片上传失败!');location.href='?act=upload'</script> " ; exit ; 
30  } 
31  } else { 
32  echo   " <script>alert('图片上传失败,请注意上传格式，只支持jpg格式图片!');location.href='?act=upload'</script> " ; exit ; 
33  } 
34 
35 
36  } 
37  ?>  
38  < body style = " padding:0px;margin:0px; " >  
39  < div style = " margin:0px;padding:0px;font-size:12px; " >  
40  < FORM ACTION = " ?act=upload "  METHOD = " POST "  enctype = " multipart/form-data " >  
41 
42  < input type = " file "  name = " file "  id = " file "   />  
43 
44  < input type = " submit "  name = " button "  id = " button "  value = " 上传 "   />  
45 
46  < input name = " upload "  type = " hidden "  id = " upload "  value = " upload "   />< input type = " hidden "  name = " MAX_FILE_SIZE "  value = " 3000000 "   />  
47  </ FORM >  
48 
49  </ div >  
50  </ body >  
51  <? php 
52  exit ; 
53  } 
54  ?>  
55  <! DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >  
56  < html xmlns = " http://www.w3.org/1999/xhtml " >  
57  < head >  
58  < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />  
59  < title > 上传照片 , 上传后可以预览 - www . corange . cn 网站开发代码 </ title >  
60  < script src = " js/jquery.pack.js " ></ script >  
61  </ head >  
62 
63  < body >  
64  < form action = " upload_ok.php "  name = " myform " >  
65  < table width = " 700 "  border = " 0 "  cellpadding = " 3 "  cellspacing = " 1 " >  
66  < tr >  
67  < td width = " 250 "  valign = " top "  bgcolor = " #FFFFFF " >  
68  < div id = " ImageDragContainer " >  
69 
70  </ div >  
71 
72  </ td >  
73  < td valign = " top "  bgcolor = " #FFFFFF " >  
74  < br >< br >  
75  < iframe frameborder = 0  style = " width:350px;height:50px;padding:0px;border:0px;background:#fff "  src = " ?act=upload " ></ iframe >< textarea cols = " 60 "  name = " bigpic "  rows = " 1 "  id = " IconContainer " ></ textarea >  
76  </ td >  
77  </ tr >  
78  </ table >  
79  < input name = ""  type = " submit "   />  
80  </ form >  
81  </ html >  
82  Jquery请自行下载后测试 
83 
84  原文地址 : http : // www.corange.cn/archives/2010/04/3603.html

 

转载于:https://www.cnblogs.com/zerogo/archive/2010/05/04/1726910.html