在很多項目中都會叫用戶上傳東西這些的，自從接觸了jquery 和ajax之后就不管做什么，首先都會想到這個，我這個人呢？是比較重視客戶體驗的，這次我這邊負責的是后台板塊，然后就有一塊是要求用戶上傳照片的，當然就想到了無刷新上傳了呀，一般的jquery+ajax的話傳遞給php的data我習慣用json，然后就不知道怎么怎么把$_FILES數組中的內容給php，我要用move_uploaded_file這個函數來吧$_FILES['file']['tmp_name']移動到我想要的位置，tmp_name是上傳的臨時路徑了啦，具體參看手冊，數組中有很多關於文件的記錄的。查詢了很多記錄，要達到無刷新上傳，那么有的解決方法是用生成frame來做得，找了很久很久，找到一個插件，jquery的，叫jquery.form，是個表單插件，有興趣的同學可以上網查看，我這里只說我這個的實現而已，ok，上代碼：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>jQuery+php實現ajax文件上傳</title> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 7 <script type="text/javascript" src="jquery.form.js"></script> 8 <style type="text/css"> 9 .opacity{ 10 opacity:0.3; 11 filter:alpha(opacity=30); 12 background-color: black; 13 } 14 .mask{ 15 16 position:fixed; 17 _position:absolute; 18 top:0; 19 left:0; 20 z-index:1000; 21 } 22 #main{ 23 width:980px; 24 margin:0px auto; 25 text-align:center; 26 } 27 #loading{ 28 background-color:white; 29 width:100px; 30 height:20px; 31 position:fixed; 32 _position:absolute; 33 text-align:center; 34 border-style:groove; 35 z-index:2000; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="main"> 42 <div class="demo"> 43 <div class="btn"> 44 <span>添加附件</span> 45 <input id="fileupload" type="file" name="mypic"> 46 </div> 47 <div id="zhezhao"> 48 <div id="loading"> 49 <span class="bar"><img src="loading.gif" /></span><span class="percent">0%</span > 50 </div> 51 </div> 52 <div id="showimg"></div> 53 </div> 54 </div> 55 56 <script type="text/javascript"> 57 $(function () { 58 var percent = $('.percent'); 59 var showimg = $('#showimg'); 60 var zhezhao = $("#zhezhao"); 61 var btn = $(".btn span"); 62 zhezhao.hide(); 63 $("#fileupload").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>"); 64 $("#fileupload").change(function(){ 65 $("#myupload").ajaxSubmit({ 66 dataType: 'json', 67 beforeSend: function() { 68 showimg.empty(); 69 zhezhao.show(); 70 var percentVal = '0%'; 71 percent.html(percentVal); 72 btn.html("上傳中..."); 73 }, 74 uploadProgress: function(event, position, total, percentComplete) { 75 $("#zhezhao").attr("class","mask opacity"); 76 $("#zhezhao").css('width',$(window).width()); 77 $("#zhezhao").css('height',$(window).height()); 78 var percentVal = percentComplete + '%'; 79 percent.html(percentVal); 80 $("#loading").css('margin-left',$(window).width()/2-50); 81 $("#loading").css('margin-top',$(window).height()/2-10); 82 }, 83 success: function(data) { 84 var img = "files/"+data.pic; 85 zhezhao.hide(); 86 showimg.html("<img src='"+img+"'>"); 87 btn.html("添加附件"); 88 }, 89 error:function(xhr){ 90 btn.html("上傳失敗"); 91 } 92 }); 93 }); 94 }); 95 </script> 96 97 </body> 98 </html>
響應頁面action.php中只是簡單的處理上傳，然后以json數據的形式返回，供前台顯示
1 <?php 2 3 $picname = $_FILES['mypic']['name']; 4 $picsize = $_FILES['mypic']['size']; 5 if ($picname != "") { 6 if ($picsize > 1024000) { 7 echo '圖片大小不能超過1M'; 8 exit; 9 } 10 $type = strstr($picname, '.'); 11 if ($type != ".gif" && $type != ".jpg") { 12 echo '圖片格式不對！'; 13 exit; 14 } 15 $rand = rand(100, 999); 16 $pics = date("YmdHis") . $rand . $type; 17 //上傳路徑 18 $pic_path = "files/". $pics; 19 move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path); 20 } 21 $size = round($picsize/1024,2); 22 $arr = array( 23 'name'=>$picname, 24 'pic'=>$pics, 25 'size'=>$size 26 ); 27 echo json_encode($arr); 28 ?>
然后就完成啦。
好像還有jquery.form還沒有給大家，這里就不說了，我網盤有寫好的demo，需要的同學可以下載看。