首页>>表单>>jQuery php ajax图片上传(2013-10-03)

jQuery php ajax图片上传

 jquery php ajax图片上传,上传后有预览,上传进度显示

上传文件和删除文件的处理都在action.php文件处理

选择文件后直接上传，不需要点击其他按钮

jQuery php ajax图片上传
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="demo">  
  2.         <p>允许上传gif/jpg/png格式的图片，图片体积不能超过500k  
  3.         </p>  
  4.         <div class="btn">  
  5.             <span>添加附件</span>  
  6.             <input id="fileupload" type="file" name="mypic">  
  7.         </div>  
  8.         <div class="progress">  
  9.             <span class="bar"></span><span class="percent">0%</span >  
  10.         </div>  
  11.         <div class="files"></div>  
  12.         <div id="showimg"></div>  
  13.    </div>  

css文件

CSS Code
  1. .btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}  
  2. .btn input {position: absolute;top: 0; rightright: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}  
  3. .progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}  
  4. .bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }  
  5. .percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }  
  6. .files{height:22px; line-height:22px; margin:10px 0}  
  7. .delimg{margin-left:20px; color:#090; cursor:pointer}  

js文件

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function () {  
  3.     var bar = $('.bar');  
  4.     var percent = $('.percent');  
  5.     var showimg = $('#showimg');  
  6.     var progress = $(".progress");  
  7.     var files = $(".files");  
  8.     var btn = $(".btn span");  
  9.     $(".demo").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");  
  10.     $("#fileupload").change(function(){  
  11.         $("#myupload").ajaxSubmit({  
  12.             dataType:  'json',  
  13.             beforeSend: function() {  
  14.                 showimg.empty();  
  15.                 progress.show();  
  16.                 var percentVal = '0%';  
  17.                 bar.width(percentVal);  
  18.                 percent.html(percentVal);  
  19.                 btn.html("上传中...");  
  20.             },  
  21.             uploadProgress: function(event, position, total, percentComplete) {  
  22.                 var percentVal = percentComplete + '%';  
  23.                 bar.width(percentVal)  
  24.                 percent.html(percentVal);  
  25.             },  
  26.             /*complete: function(xhr) { 
  27.                 $(".files").html(xhr.responseText); 
  28.             },*/  
  29.             success: function(data) {  
  30.                 files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");  
  31.                 var img = "../upload/"+data.pic;  
  32.                 showimg.html("<img src='"+img+"'>");  
  33.                 btn.html("添加附件");  
  34.             },  
  35.             error:function(xhr){  
  36.                 btn.html("上传失败");  
  37.                 bar.width('0')  
  38.                 files.html(xhr.responseText);  
  39.             }  
  40.         });  
  41.     });  
  42.       
  43.     $(".delimg").live('click',function(){  
  44.         var pic = $(this).attr("rel");  
  45.         $.post("action.php?act=delimg",{imagename:pic},function(msg){  
  46.             if(msg==1){  
  47.                 files.html("删除成功.");  
  48.                 showimg.empty();  
  49.                 progress.hide();  
  50.             }else{  
  51.                 alert(msg);  
  52.             }  
  53.         });  
  54.     });  
  55. });  
  56. </script>  

action.php

PHP Code
  1. <?php  
  2. $action = $_GET['act'];  
  3. if($action=='delimg'){  
  4.     $filename = $_POST['imagename'];  
  5.     if(!emptyempty($filename)){  
  6.         unlink('../upload/'.$filename);  
  7.         echo '1';  
  8.     }else{  
  9.         echo '删除失败.';  
  10.     }  
  11. }else{  
  12.     $picname = $_FILES['mypic']['name'];  
  13.     $picsize = $_FILES['mypic']['size'];  
  14.     if ($picname != "") {  
  15.         if ($picsize > 1024000*30) {  
  16.             echo '图片大小不能超过30M';  
  17.             exit;  
  18.         }  
  19.         $type = strstr($picname, '.');  
  20.         if ($type != ".gif" && $type != ".jpg" && $type != ".png") {  
  21.             echo '图片格式不对！';  
  22.             exit;  
  23.         }  
  24.         $rand = rand(100, 999);  
  25.         $pics = date("YmdHis") . $rand . $type;  
  26.         //上传路径  
  27.         $pic_path = "../upload/". $pics;  
  28.         move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);  
  29.     }  
  30.     $size = round($picsize/1024,2);  
  31.     $arr = array(  
  32.         'name'=>$picname,  
  33.         'pic'=>$pics,  
  34.         'size'=>$size  
  35.     );  
  36.     echo json_encode($arr);  
  37. }  
  38. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_47.html