jQuery php ajax图片上传

cixiren

jQuery php ajax图片上传
 jquery php ajax图片上传,上传后有预览,上传进度显示
上传文件和删除文件的处理都在action.php文件处理


演示
XML/HTML Code

• <div class="demo">  
  
•         <p>允许上传gif/jpg/png格式的图片，图片体积不能超过500k  
  
•         </p>  
  
•         <div class="btn">  
  
•             <span>添加附件</span>  
  
•             <input id="fileupload" type="file" name="mypic">  
  
•         </div>  
  
•         <div class="progress">  
  
•             <span class="bar"></span><span class="percent">0%</span >  
  
•         </div>  
  
•         <div class="files"></div>  
  
•         <div id="showimg"></div>  
  
•    </div>  
  

css文件
CSS Code

• .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;}  
  
• .btn input {position: absolute;top: 0; rightright: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}  
  
• .progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}  
  
• .bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }  
  
• .percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }  
  
• .files{height:22px; line-height:22px; margin:10px 0}  
  
• .delimg{margin-left:20px; color:#090; cursor:pointer}  
  

js文件
JavaScript Code

• <script type="text/javascript">  
  
• $(function () {  
  
•     var bar = $('.bar');  
  
•     var percent = $('.percent');  
  
•     var showimg = $('#showimg');  
  
•     var progress = $(".progress");  
  
•     var files = $(".files");  
  
•     var btn = $(".btn span");  
  
•     $(".demo").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");  
  
•     $("#fileupload").change(function(){  
  
•         $("#myupload").ajaxSubmit({  
  
•             dataType:  'json',  
  
•             beforeSend: function() {  
  
•                 showimg.empty();  
  
•                 progress.show();  
  
•                 var percentVal = '0%';  
  
•                 bar.width(percentVal);  
  
•                 percent.html(percentVal);  
  
•                 btn.html("上传中...");  
  
•             },  
  
•             uploadProgress: function(event, position, total, percentComplete) {  
  
•                 var percentVal = percentComplete + '%';  
  
•                 bar.width(percentVal)  
  
•                 percent.html(percentVal);  
  
•             },  
  
•             /*complete: function(xhr) { 
  
•                 $(".files").html(xhr.responseText); 
  
•             },*/  
  
•             success: function(data) {  
  
•                 files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");  
  
•                 var img = "../upload/"+data.pic;  
  
•                 showimg.html("<img src='"+img+"'>");  
  
•                 btn.html("添加附件");  
  
•             },  
  
•             error:function(xhr){  
  
•                 btn.html("上传失败");  
  
•                 bar.width('0')  
  
•                 files.html(xhr.responseText);  
  
•             }  
  
•         });  
  
•     });  
  
•       
  
•     $(".delimg").live('click',function(){  
  
•         var pic = $(this).attr("rel");  
  
•         $.post("action.php?act=delimg",{imagename:pic},function(msg){  
  
•             if(msg==1){  
  
•                 files.html("删除成功.");  
  
•                 showimg.empty();  
  
•                 progress.hide();  
  
•             }else{  
  
•                 alert(msg);  
  
•             }  
  
•         });  
  
•     });  
  
• });  
  
• </script>  
  

action.php
PHP Code

• <?php  
  
• $action = $_GET['act'];  
  
• if($action=='delimg'){  
  
•     $filename = $_POST['imagename'];  
  
•     if(!emptyempty($filename)){  
  
•         unlink('../upload/'.$filename);  
  
•         echo '1';  
  
•     }else{  
  
•         echo '删除失败.';  
  
•     }  
  
• }else{  
  
•     $picname = $_FILES['mypic']['name'];  
  
•     $picsize = $_FILES['mypic']['size'];  
  
•     if ($picname != "") {  
  
•         if ($picsize > 1024000*30) {  
  
•             echo '图片大小不能超过30M';  
  
•             exit;  
  
•         }  
  
•         $type = strstr($picname, '.');  
  
•         if ($type != ".gif" && $type != ".jpg" && $type != ".png") {  
  
•             echo '图片格式不对！';  
  
•             exit;  
  
•         }  
  
•         $rand = rand(100, 999);  
  
•         $pics = date("YmdHis") . $rand . $type;  
  
•         //上传路径  
  
•         $pic_path = "../upload/". $pics;  
  
•         move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);  
  
•     }  
  
•     $size = round($picsize/1024,2);  
  
•     $arr = array(  
  
•         'name'=>$picname,  
  
•         'pic'=>$pics,  
  
•         'size'=>$size  
  
•     );  
  
•     echo json_encode($arr);  
  
• }  
  
• ?>  
  

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