加载中
0x0001 2017/01/06 14:00 评论了代码:微信公众平台接入java实例
 renderNull();  和 renderHtml(echostr);  是什么方法?找不到对应方法啊
@愤怒的jfinal
微信公众平台接入java实例
回复 @用心编码 : js代码贴出来了,进来看一下,假如得到图片路径,如何配置?
@愤怒的jfinal
java ,从后台得到了图片路径(json格式),那么webuploader如何接收这个图片路径,然后显示出来?
/* 
* jQuery文件上传插件,封装UI,上传处理操作采用Baidu WebUploader;
* @Author 黑爪爪;
*/
(function( $ ) {

    $.fn.extend({
/*
* 上传方法 opt为参数配置;
* serverCallBack回调函数 每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用 参数为服务器返回信息;
*/
        diyUpload:function( opt, serverCallBack ) {
  if ( typeof opt != "object" ) {
alert('参数错误!');
return;
}

var $fileInput = $(this);
var $fileInputId = $fileInput.attr('id');

//组装参数;
if( opt.url ) {
opt.server = opt.url; 
delete opt.url;
}

if( opt.success ) {
var successCallBack = opt.success;
delete opt.success;
}

if( opt.error ) {
var errorCallBack = opt.error;
delete opt.error;
}

if(opt.uploadProgress){
var progressCallBack = opt.uploadProgress;
delete opt.uploadProgress;
}

if( opt.uploadSuccess ) {
var successCallBack = opt.uploadSuccess;
delete opt.uploadSuccess;
}

if(opt.uploadFinished){
var finishedCallBack = opt.uploadFinished;
delete opt.uploadFinished;
}

if(opt.uploadAccept){
var acceptCallBack = opt.uploadAccept;
delete opt.uploadAccept;
}

//迭代出默认配置
$.each( getOption( '#'+$fileInputId ),function( key, value ){
opt[ key ] = opt[ key ] || value; 
});

if ( opt.buttonText ) {
opt['pick']['label'] = opt.buttonText;
delete opt.buttonText;
}

var webUploader = getUploader( opt );

if ( !WebUploader.Uploader.support() ) {
alert( ' 上传组件不支持您的浏览器!');
return false;
        }

//绑定文件加入队列事件;
webUploader.on('fileQueued', function( file ) {
createBox( $fileInput, file ,webUploader);

});

//进度条事件
webUploader.on('uploadProgress',function( file, percentage  ){
var $fileBox = $('#fileBox_'+file.id);
var $diyBar = $fileBox.find('.diyBar');
$diyBar.show();
percentage = percentage*100;
showDiyProgress( percentage.toFixed(2), $diyBar);

});

//全部上传结束后触发;
webUploader.on('uploadFinished', function(){
$fileInput.next('.parentFileBox').children('.diyButton').remove();
});
//绑定发送至服务端返回后触发事件;
webUploader.on('uploadAccept', function( object ,data ){
if ( serverCallBack ){
serverCallBack( data );
}
});

//上传成功后触发事件;
webUploader.on('uploadSuccess',function( file, response ){
var $fileBox = $('#fileBox_'+file.id);
var $diyBar = $fileBox.find('.diyBar');
$fileBox.removeClass('diyUploadHover');
$diyBar.fadeOut( 1000 ,function(){
$fileBox.children('.diySuccess').show();
});
if ( successCallBack ) {
successCallBack( response );
}
});

//上传失败后触发事件;
webUploader.on('uploadError',function( file, reason ){
var $fileBox = $('#fileBox_'+file.id);
var $diyBar = $fileBox.find('.diyBar');
showDiyProgress( 0, $diyBar , '上传失败!' );
var err = '上传失败! 文件:'+file.name+' 错误码:'+reason;
if ( errorCallBack ) {
errorCallBack( err );
}
});

//选择文件错误触发事件;
webUploader.on('error', function( code ) {
var text = '';
switch( code ) {
case  'F_DUPLICATE' : text = '该文件已经被选择了!' ;
break;
case  'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;
break;
case  'F_EXCEED_SIZE' : text = '文件大小超过限制!';
break;
case  'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';
break;
case 'Q_TYPE_DENIED' : text = '文件类型不正确或者是空文件!';
break;
default : text = '未知错误!';
  break;
}
            alert( text );
        });
        }    
    });
    
//Web Uploader默认配置;
function getOption(objId) {
/*
* 配置文件同webUploader一致,这里只给出默认配置.
* 具体参照:http://fex.baidu.com/webuploader/doc/index.html
*/
return {
//按钮容器;
pick:{
id:objId,
label:"点击选择图片"
},
//类型限制;
accept:{
title:"Images",
extensions:"gif,jpg,jpeg,bmp,png",
mimeTypes:"image/*"
},
//配置生成缩略图的选项
thumb:{
width:150,
height:130,
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality:70,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify:false,
// 是否允许裁剪。
crop:true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type:"image/jpeg"
},
//文件上传方式
method:"POST",
//服务器地址;
server:"",
//是否已二进制的流的方式发送文件,这样整个上传内容php://input都为文件内容
sendAsBinary:false,
// 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
chunked:true,
// 分片大小
chunkSize:512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:5000 * 1024,
fileSingleSizeLimit:500 * 1024
};
}

//实例化Web Uploader
function getUploader( opt ) {


return new WebUploader.Uploader( opt );
}

//操作进度条;
function showDiyProgress( progress, $diyBar, text ) {

if ( progress >= 100 ) {
progress = progress + '%';
text = text || '上传完成';
} else {
progress = progress + '%';
text = text || progress;
}

var $diyProgress = $diyBar.find('.diyProgress');
var $diyProgressText = $diyBar.find('.diyProgressText');
$diyProgress.width( progress );
$diyProgressText.text( text );

}

//取消事件;
function removeLi ( $li ,file_id ,webUploader) {
webUploader.removeFile( file_id );
if ( $li.siblings('li').length <= 0 ) {
$li.parents('.parentFileBox').remove();
} else {
$li.remove();
}

}
//创建文件操作div;
function createBox( $fileInput, file, webUploader ) {


var file_id = file.id;
var $parentFileBox = $fileInput.next('.parentFileBox');

//添加父系容器;
if ( $parentFileBox.length <= 0 ) {

var div = '<div class="parentFileBox"> \
<ul class="fileBoxUl"></ul>\
</div>';
$fileInput.after( div );
$parentFileBox = $fileInput.next('.parentFileBox');

}

//创建按钮
if ( $parentFileBox.find('.diyButton').length <= 0 ) {

var div = '<div class="diyButton"> \
<a class="diyStart" href="javascript:void(0)">开始上传</a> \
<a class="diyCancelAll" href="javascript:void(0)">全部取消</a> \
</div>';
$parentFileBox.append( div );
var $startButton = $parentFileBox.find('.diyStart');
var $cancelButton = $parentFileBox.find('.diyCancelAll');

//开始上传,暂停上传,重新上传事件;
var uploadStart = function (){
webUploader.upload();
$startButton.text('暂停上传').one('click',function(){
webUploader.stop();
$(this).text('继续上传').one('click',function(){
uploadStart();
});
});
}

//绑定开始上传按钮;
$startButton.one('click',uploadStart);

//绑定取消全部按钮;
$cancelButton.bind('click',function(){
var fileArr = webUploader.getFiles( 'queued' );
$.each( fileArr ,function( i, v ){
removeLi( $('#fileBox_'+v.id), v.id, webUploader );
});
});

}

//添加子容器;
var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \
<div class="viewThumb"></div> \
<div class="diyCancel"></div> \
<div class="diySuccess"></div> \
<div class="diyFileName">'+file.name+'</div>\
<div class="diyBar"> \
<div class="diyProgress"></div> \
<div class="diyProgressText">0%</div> \
</div> \
</li>';

$parentFileBox.children('.fileBoxUl').append( li );

//父容器宽度;
var $width = $('.fileBoxUl>li').length * 180;
var $maxWidth = $fileInput.parent().width();
$width = $maxWidth > $width ? $width : $maxWidth;
$parentFileBox.width( $width );

var $fileBox = $parentFileBox.find('#fileBox_'+file_id);


//绑定取消事件;
var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){
//获取当前网址
   var curWwwPath=window.document.location.href;
   //获取主机地址之后的目录
   var pathName=window.document.location.pathname;
   var pos=curWwwPath.indexOf(pathName);
   //获取主机地址
   var localhostPaht=curWwwPath.substring(0,pos);
   //获取带"/"的项目名
   var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);              
var url = localhostPaht+projectName+"/ware/removePicture";
    $.post(url, {id:file_id}, function callback(txt) {
   
   
    });
removeLi( $(this).parent('li'), file_id, webUploader );
});


if ( file.type.split("/")[0] != 'image' ) {
var liClassName = getFileTypeClassName( file.name.split(".").pop() );
$fileBox.addClass(liClassName);
return;
}

//生成预览缩略图;
webUploader.makeThumb( file, function( error, dataSrc ) {
if ( !error ) {
$fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >');
}
});
}

//获取文件类型;
function getFileTypeClassName ( type ) {
var fileType = {};
var suffix = '_diy_bg';
fileType['pdf'] = 'pdf';
fileType['zip'] = 'zip';
fileType['rar'] = 'rar';
fileType['csv'] = 'csv';
fileType['doc'] = 'doc';
fileType['xls'] = 'xls';
fileType['xlsx'] = 'xls';
fileType['txt'] = 'txt';
fileType = fileType[type] || 'txt';
return fileType+suffix;
}

})( jQuery );

@愤怒的jfinal
java ,从后台得到了图片路径(json格式),那么webuploader如何接收这个图片路径,然后显示出来?
你有部分代码吗?有的话给一点参照下。因为这里的jsp页面一打开就进行初始化,得到了图片路径,能否抽空帮写写代码么?,比如得到的图片路径是 image/aaa.jpg ,不胜感谢!
@愤怒的jfinal
java ,从后台得到了图片路径(json格式),那么webuploader如何接收这个图片路径,然后显示出来?
愤怒的jfinal 2016/05/17 13:59 回答了问题: webuploader用springMVC实现上传
谢谢哦,茅塞顿开
@愤怒的jfinal
大神,快乐急救,如果有案例请给俺一个,请指导一下:webuploader 的js里面有一个服务器地址server:...
愤怒的jfinal 2016/05/17 12:02 回答了问题: webuploader用springMVC实现上传
谢谢哦,如果后台有数据返回,那么在前台又应该怎么接收的?
@愤怒的jfinal
大神,快乐急救,如果有案例请给俺一个,请指导一下:webuploader 的js里面有一个服务器地址server:...
愤怒的jfinal 2015/11/25 17:16 回答了问题: Db的分页方法是如何执行的?
就是创建一个伪序号;目前找到其他方法来解决分页刷新问题了。
@愤怒的jfinal
String sql = " active_comment order by id desc";int start...
愤怒的jfinal 2015/10/20 22:19 回答了问题: jfinal + Jcrop插件完成图片上传
谢谢!
@愤怒的jfinal
菜鸟不会搞这样的结合运用,请各方大神前来帮忙写一个小实例,能上传并保存,让我学习学习,在此万分感谢了!
愤怒的jfinal 2015/10/20 22:19 回答了问题: jfinal + Jcrop插件完成图片上传
谢谢大神指点
@愤怒的jfinal
菜鸟不会搞这样的结合运用,请各方大神前来帮忙写一个小实例,能上传并保存,让我学习学习,在此万分感谢了!

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部