1.colorbox流读取图片
<link rel="stylesheet" href="${cjq }/static/assets/css/colorbox.min.css">
<script src="${cjq }/static/assets/js/jquery.colorbox.min.js"></script>
jQuery(function($) {
var colorbox_params = {
rel: 'colorbox',
photo:true,
reposition:true,
scalePhotos:true,
scrolling:false,
previous:'<i class="icon-arrow-left"></i>',
next:'<i class="icon-arrow-right"></i>',
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("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon
})
-------------------------------------------------------------------------------------------------------------------------------------------------
2.dropzone.js上传文件插件
<link rel="stylesheet" href="${cjq }/static/assets/css/dropzone.min.css">
<script src="${cjq }/static/assets/js/dropzone.min.js"></script>
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上传图片插件
<link rel="stylesheet" href="${cjq }/static/assets/uploadify/css/html5uploader.css" />
<script src="${cjq }/static/assets/js/js/jquery.html5uploader.js"
type="text/javascript"></script>
$(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 += '<li>';
str += '<input style="width:100px" id="earlypath" type="hidden" name="path" class="path" value="'+root+'">';
str += '<input style="width:100px" id="uploadDatetime" type="hidden" name="uploadDatetime" class="uploadDatetime" value="'+obj.uploaddate+'">';
str += '<input style="width:100%;" readOnly="true" id="earlyfilename" type="text" name="earlyfilename" value="'+ obj.filename+'">';
$("#divAttachemt").append(str);
}
}
});
});
---------------------------------------------------------------------------------------------------------------------------------------------------------
4.百度地图接口的使用
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
//创建和初始化地图函数：
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 "上传成功!";
}