首页 > 代码库 > JQ_Web Uploader图片上传控件

JQ_Web Uploader图片上传控件

HTML

<div id="uploader">
    <div id="j_stat">
    <input type="text" name="thumb" id="j_tb" value=http://www.mamicode.com/"" />
    </div>
    <div id="j_file">选择文件</div>
    <button id="j_btn" class="btn btn-default">开始上传</button>
</div>
<script type="text/javascript" src=http://www.mamicode.com/"./jquery.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/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);
});
});