ace缓存扩展接口_ace 插件的使用

本文介绍了多种前端图片上传插件的使用,包括colorbox流读取图片、dropzone.js上传文件、html5uploader上传图片,以及百度地图API的详细使用,包括地图创建、事件设置、控件添加等。同时,提供了Java后台处理图片上传的通用代码。
摘要由CSDN通过智能技术生成

1.colorbox流读取图片

jQuery(function($) {

var colorbox_params = {

rel: 'colorbox',

photo:true,

reposition:true,

scalePhotos:true,

scrolling:false,

previous:'',

next:'',

close:'×',

current:'{current} of {total}',

maxWidth:'100%',

maxHeight:'100%',

onOpen:function(){

document.body.style.overflow = 'hidden';

},

onClosed:function(){

document.body.style.overflow = 'auto';

},

onComplete:function(){

$.colorbox.resize();

}

};

$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);

$("#cboxLoadingGraphic").html("");//let's add a custom loading icon

})

-------------------------------------------------------------------------------------------------------------------------------------------------

2.dropzone.js上传文件插件

jQuery(function($){

$("#dropzone").dropzone({

url: "${cjq}/photo/uploadphoto",

thumbnailHeight: 120,

thumbnailWidth: 120,

maxFilesize:1,

acceptedFiles: ".JPEG,.jpeg,.JPG,.jpg,.GIF,.gif,.BMP,.bmp,.PNG,.png",

uploadMultiple:true,

//移除前端图片

//addRemoveLinks:true,

//dictRemoveFile: '删除图片',

dictFileTooBig:'图片内容太大,上传失败!'

});

});

------------------------------------------------------------------------------------------------------------------------------------------

3.html5uploader上传图片插件

$(function() {

$('#uploadearly').html5uploader(

{

auto : true,

multi : true,

removeTimeout : 99999999,

url : '${cjq}/index/upload',

onUploadStart : function() {

//alert('开始上传');

},

onInit : function() {

//alert('初始化');

},

onUploadComplete : function() {

//alert('上传完成');

},

onUploadSuccess : function(file, data,respone) {

if(data==""){

layer.msg("图片格式错误!");

}else{

var obj = JSON.parse(data);

var root = (obj.path).replace(/["""]/g, "");

var str="";

str += '

';

str += '';

str += '';

str += '';

$("#divAttachemt").append(str);

}

}

});

});

---------------------------------------------------------------------------------------------------------------------------------------------------------

4.百度地图接口的使用

//创建和初始化地图函数:

function initMap(position){

createMap();//创建地图

setMapEvent();//设置地图事件

addMapControl();//向地图添加控件

}

//创建地图函数:

function createMap(){

var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

var point = new BMap.Point(112.925821,28.226873);//定义一个中心点坐标

map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中

window.map = map;//将map变量存储在全局

}

//地图事件设置函数:

function setMapEvent(){

map.enableDragging();//启用地图拖拽事件,默认启用(可不写)

map.enableScrollWheelZoom();//启用地图滚轮放大缩小

map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)

map.enableKeyboard();//启用键盘上下左右键移动地图

}

//地图控件添加函数:

function addMapControl(){

//向地图中添加缩放控件

var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

map.addControl(ctrl_nav);

//向地图中添加缩略图控件

var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

map.addControl(ctrl_ove);

//向地图中添加比例尺控件

var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

map.addControl(ctrl_sca);

}

initMap();//创建和初始化地图

----------------------------------------------------------------------------------------------------------------------------------------------------------

5.上传通用java代码

//上传图片

@RequestMapping(value = "/uploadphoto", method = RequestMethod.POST)

@ResponseBody

public String uploadphoto(HttpServletRequest request,

HttpServletResponse response,HttpSession session,Model model) {

String resultName = "";

String newFileName = "";

// 用户信息

Object objuser = request.getSession().getAttribute("user");

User userupload = (User) objuser;

// 设置保存路径为tomcat下的...

ServletContext context = request.getSession().getServletContext();

SimpleDateFormat dfday = new SimpleDateFormat("yyyyMMdd");

String relativePath = "/photo/" + dfday.format(new Date());

String savePath = context.getRealPath(relativePath);

File f = new File(savePath);

// 创建文件夹

if (!f.exists()) {

f.mkdirs();

}

// 文件流

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

Iterator item = multipartRequest.getFileNames();

while (item.hasNext()) {

String fileName = (String) item.next();

MultipartFile file = multipartRequest.getFile(fileName);

//截取不带扩展名的文件名

fileName = file.getOriginalFilename().substring(0,

file.getOriginalFilename().lastIndexOf("."));

// 检查扩展名

String fileExt = file.getOriginalFilename()

.substring(file.getOriginalFilename().lastIndexOf(".") + 1)

.toLowerCase();

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

// 新文件名为原名+日期+随机数

newFileName = df.format(new Date()) + "_"

+ new Random().nextInt(1000) + "." + fileExt;

resultName = resultName + newFileName + ";";

try {

//MultipartFile转化为File并输出

File uploadedFile = new File(savePath, newFileName);

file.transferTo(uploadedFile);

uploadedFile.createNewFile();

} catch (Exception e) {

e.printStackTrace();

}

String strurl = relativePath +"/"+newFileName+";";

UserPhoto userphoto=new UserPhoto();

userphoto.setPhotoname(newFileName);

userphoto.setPhotopath(strurl);

userphoto.setUploaddatetime(new Date());

userphoto.setUserid(userupload.getId());

userphotoservice.insertuserphoto(userphoto);

}

return "上传成功!";

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值