<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.form.js"></script>

<div id="main">

   <div class="demo">

                   <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>

<script type="text/javascript">

$(function () {

        var bar = $('.bar');

        var percent = $('.percent');

        var showimg = $('#showimg');

        var progress = $(".progress");

        var files = $(".files");

        var btn = $(".btn span");

//action.php 自行对接您的COS (参照 PHP SDK)

        $(".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 = "/demo/upload/files/"+data.pic+"?"+Math.random();

                                showimg.html("<img src='"+img+"'>");

                                btn.html("添加附件");

                        },

                        error:function(xhr){

                                btn.html("上传失败");

                                bar.width('0')

                                files.html(xhr.responseText);

                        },

                        clearForm: true   

                });

        });

        $(".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 = $_GET['act']; 

if($action=='delimg'){ 

//删除图片 

//自行对接COS

    } 

}else{ 

//上传图片 

//自行对接COS,返回下面的JSON

  $arr = array( 

        'name'=>$picname, 

        'pic'=>$pics, 

        'size'=>$size 

    ); 

    echo json_encode($arr); //输出json数据

}