从后台得到了图片路径（json格式）,那么webuploader如何接收这个图片路径，然后显示出来？
java ，从后台得到了图片路径（json格式）,那么webuploader如何接收这个图片路径，然后显示出来？
uploader.on("uploadSuccess",function(file){
//这里面的file对象就是后台返回的
--- 共有 4 条评论 ---
: 你是想显示出图片是吗，再uploadSuccess里面打印下file对象（后台），看下文件路径，然后$("选择器").attr("src","文件路径")就可以了
: js代码贴出来了，进来看一下，假如得到图片路径，如何配置？
: 你把js代码贴下，可以帮你看看
你有部分代码吗？有的话给一点参照下。因为这里的jsp页面一打开就进行初始化，得到了图片路径，能否抽空帮写写代码么？，比如得到的图片路径是
image/aaa.jpg
，不胜感谢！
* jQuery文件上传插件,封装UI,上传处理操作采用Baidu WebU
(function( $ ) {
& & $.fn.extend({
* 上传方法 opt为参数配置;
* serverCallBack回调函数 每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用 参数为服务器返回信息;
& & & & diyUpload:function( opt, serverCallBack ) {
if ( typeof opt != "object" ) {
alert('参数错误!');
var $fileInput = $(this);
var $fileInputId = $fileInput.attr('id');
//组装参数;
if( opt.url ) {
opt.server = opt.&
delete opt.
if( opt.success ) {
var successCallBack = opt.
delete opt.
if( opt.error ) {
var errorCallBack = opt.
delete opt.
if(opt.uploadProgress){
var progressCallBack = opt.uploadP
delete opt.uploadP
if( opt.uploadSuccess ) {
var successCallBack = opt.uploadS
delete opt.uploadS
if(opt.uploadFinished){
var finishedCallBack = opt.uploadF
delete opt.uploadF
if(opt.uploadAccept){
var acceptCallBack = opt.uploadA
delete opt.uploadA
//迭代出默认配置
$.each( getOption( '#'+$fileInputId ),function( key, value ){
opt[ key ] = opt[ key ] ||&
if ( opt.buttonText ) {
opt['pick']['label'] = opt.buttonT
delete opt.buttonT
var webUploader = getUploader( opt );
if ( !WebUploader.Uploader.support() ) {
alert( ' 上传组件不支持您的浏览器！');
//绑定文件加入队列事件;
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+' 错误码:'+
if ( errorCallBack ) {
errorCallBack( err );
//选择文件错误触发事件;
webUploader.on('error', function( code ) {
var text = '';
switch( code ) {
case &'F_DUPLICATE' : text = '该文件已经被选择了!' ;
case &'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;
case &'F_EXCEED_SIZE' : text = '文件大小超过限制!';
case &'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';
case 'Q_TYPE_DENIED' : text = '文件类型不正确或者是空文件!';
default : text = '未知错误!';
& & & & & &
alert( text );
//Web Uploader默认配置;
function getOption(objId) {
* 配置文件同webUploader一致,这里只给出默认配置.
* 具体参照:/webuploader/doc/index.html
//按钮容器;
label:"点击选择图片"
//类型限制;
title:"Images",
extensions:"gif,jpg,jpeg,bmp,png",
mimeTypes:"image/*"
//配置生成缩略图的选项
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 || '上传完成';
progress = progress + '%';
text = text ||
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();
$li.remove();
//创建文件操作
function createBox( $fileInput, file, webUploader ) {
var file_id = file.
var $parentFileBox = $fileInput.next('.parentFileBox');
//添加父系容器;
if ( $parentFileBox.length &= 0 ) {
var div = '&div class="parentFileBox"& \
&ul class="fileBoxUl"&&/ul&\
$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& \
$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& \
$parentFileBox.children('.fileBoxUl').append( li );
//父容器宽度;
var $width = $('.fileBoxUl&li').length * 180;
var $maxWidth = $fileInput.parent().width();
$width = $maxWidth & $width ? $width : $maxW
$parentFileBox.width( $width );
var $fileBox = $parentFileBox.find('#fileBox_'+file_id);
//绑定取消事件;
var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){
//获取当前网址
& &var curWwwPath=window.document.location.
& &//获取主机地址之后的目录
& &var pathName=window.document.location.
& &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);
//生成预览缩略图;
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';
})( jQuery );15975人阅读
Java Web（26）
Java（56）
实现用HTTP连接获取一张图片，在servlet中转为流之后输出，这样访问一个service之后就能直接得到图片流并显示出来
类似于访问一个图片的src（html)中会向一个http://localhost:8080/webproj/i.jpg发送请求，于是浏览器就会显示这张图片出来，现在要实现一个后台的service，做的是同样的事情但是请求的却是service，而这个service就返回了图片流回来
* 获取图片
* @param request
* @param response
public void GetImage(HttpServletRequest request
, HttpServletResponse response){
URL url = new URL(&/www/images/csdnindex_logo.gif&);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestMethod(&GET&);
conn.setConnectTimeout(5 * 1000);
InputStream inStream = conn.getInputStream();//通过输入流获取图片数据
byte data[] = readInputStream(inStream);
inStream.read(data);
inStream.close();
response.setContentType(&image/jpg&); //设置返回的文件类型
OutputStream os = response.getOutputStream();
os.write(data);
os.flush();
os.close();
} catch (Exception e) {
e.printStackTrace();
public static byte[] readInputStream(InputStream inStream) throws Exception{
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
byte[] buffer = new byte[2048];
int len = 0;
while( (len=inStream.read(buffer)) != -1 ){
outStream.write(buffer, 0, len);
inStream.close();
return outStream.toByteArray();
* 上传首页图片
* @param request
* @param response
public void UploadHomeImage(HttpServletRequest request
, HttpServletResponse response){
//存储文件，同时获取表单中的输入值对
Map&String, String& nameValuePair = new HashMap&String, String&();
//户型图片存储对象
HomeImage homeImage = new HomeImage();
//获取存储的地址，同时捕获参数值对
String imageUrl = saveUploadFile(request,
&/Upload/HomeImage/&, nameValuePair);
homeImage.setImageUrl(imageUrl);
homeImage.setUploadDate(new Date());
settingService.saveOrUpdateHomeImage(homeImage);
//获取信息界面显示类
HomeImagePage responsePage = settingService.getWebHomePage();
//将页面显示数据类转化为JSON，返回前端
responseOutWithJson(response, responsePage);
response.setStatus(HttpServletResponse.SC_OK);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1477815次
积分：12836
积分：12836
排名：第869名
原创：225篇
转载：90篇
评论：131条
(1)(1)(1)(2)(6)(1)(7)(10)(6)(5)(11)(3)(1)(13)(3)(7)(4)(14)(3)(1)(10)(11)(4)(1)(6)(13)(10)(13)(15)(20)(17)(20)(11)(21)(20)(22)(3)