首页 > Web开发 > 详细

JQ_Web Uploader图片上传控件

时间:2014-07-29 16:22:49      阅读:361      评论:0      收藏:0      [点我收藏+]

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

JQ_Web Uploader图片上传控件,布布扣,bubuko.com

JQ_Web Uploader图片上传控件

原文:http://my.oschina.net/miaowang/blog/295583

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!