ace 插件的使用

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:'&times;',
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 "上傳成功!";
}