<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
<script type="text/javascript" src="jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="webuploader/webuploader.js"
 
></script>

<div class="container"> <div class="cerDiv"> <p class="cer">身份證件：</p> <div id="identity"></div> <div class="subBut"><span onClick="webUpload('identity')" class="uploadImg">上傳圖片</span></div>

<script type="text/javascript">
        /* --上傳元件開始-- */
var $img;
        var uploader = WebUploader.create({
            // 選完檔案後，是否自動上傳。
auto: true,
            // swf檔案路徑
swf: '/webuploader/Uploader.swf',
            server: 'http://public/upload?type=images',
            // 內部根據當前執行是建立，可能是input元素，也可能是flash.
pick: '.uploadImg',
            duplicate :true,//讓圖片可重複上傳
            // 只允許選擇圖片檔案。
accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
},
            resize:false
});

        // 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
uploader.on('fileQueued', function (file) {

            var listId = $list.getAttribute("id");

            $("#"+listId).append( '<div id="' + file.id + '" class="item" style="position:relative;float:left;">' +
            '<div class="img" style="height:100px;width:100%;padding:0px;"><img style="width:100%;height:100%" data-id="'+ file.id +'" src=""></div>' +
            '<h4 class="info">' + file.name + '</h4>' + '<input id="imageId" type="hidden" name="imageId" value="' +  file.id  + '" />' +
            '<div class="file-panel" ><a onclick="remove(this);"><i class="fa fa-trash" style=""></i></a></div>'+
            '</div>' );

            $img = $("#"+ file.id).find('img');

            // 建立縮圖 如果為非圖片檔案，可以不用呼叫此方法 100（寬） x 100（高）  
uploader.makeThumb( file, function( error, src ) {
                console.log(src);
                if ( error ) {
                    $img.replaceWith('<span>不能預覽</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100 );

            $(".webUpload").val(file.name);
        });

        // 檔案上傳失敗，顯示上傳出錯。
uploader.on('uploadError', function (file) {
            alert('上傳失敗');
        });

        // 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on('uploadComplete', function (file) {
            console.log(file);
//            $(".webUpload").removeClass("webUpload");
});
        var $list;
        function webUpload(id) {
            $list = document.getElementById(id);
            document.getElementById(id).setAttribute("class","webUpload");
        }

        function remove(ele){
            var imgEle = $(ele).parent().parent().find("img");
            var imgId = $(imgEle).attr("data-id");
            // 移除縮圖並將上傳檔案移出上傳序列
var $li = $('#' + imgId);
            $li.off().remove();
            // 重置uploader，目前只重置了檔案佇列
uploader.reset();

        }

    </script>