jQuery php ajax图片上传

WillZhang

2013-10-04

关注关注

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);  
}  
?>  