JQ_Web Uploader圖片上傳控制項

標籤：style   java   color   strong   檔案   io   art   cti   

HTML

<div id="uploader">
    <div id="j_stat">
    <input type="text" name="thumb" id="j_tb" value="" />
    </div>
    <div id="j_file">選擇檔案</div>
    <button id="j_btn" class="btn btn-default">開始上傳</button>
</div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="../../dist/webuploader.js"></script>

 

JQUERY

$(function(){
var up_file=‘#j_file‘, //選擇圖片
    up_btn= ‘#j_btn‘,//上傳圖片
    state = ‘pedding‘, //上傳狀態
    uploader; //多處調用只需添加uploader1

//初始化uploader
uploader = WebUploader.create({
    swf: ‘../../dist/Uploader.swf‘,
    server: ‘../../server/fileupload.php‘,
    pick: up_file,
    resize: false,
});   
//state狀態設定
uploader.on( ‘all‘, function( type ) {
if ( type === ‘startUpload‘ ) {
    state = ‘uploading‘;
} else if ( type === ‘stopUpload‘ ) {
    state = ‘paused‘;
} else if ( type === ‘uploadFinished‘ ) {
    state = ‘done‘;
}
if ( state === ‘uploading‘ ) {
    $(up_btn).text(‘暫停上傳‘);
} else {
     $(up_btn).text(‘開始上傳‘);
}   
});   
//上傳成功後操作   
uploader.on(‘uploadSuccess‘,function(file,response){
    $(‘#j_tb‘).attr(‘value‘,response.imgs);
});
});