首页 > 代码库 > 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);
});
});