itoo在线编辑——mongo学习1
2016-08-20 19:52
190 查看
一、前台
1. jsp页面
html标签里面要有个type 为“file”的input。例子如下:<div style="padding-top: 8px;"> <p class="ui-tips">上传头像会自动生成头像缩略图片,您也可以拖动大图的裁剪区域,调整缩图内容。</p> <p class="ui-tips">支持JPG、GIF、PNG等图片格式推荐尺寸:180*180像素</p> <input type="file" name="fileCoursePoster" onchange="uploadCoursePoster();" id="fileCoursePoster"/> <span id="errorCoursePoster" style="color: red; display: none;">请上传图片!</span> <input type="hidden" id="imageType" name="imageType"> </div><code><span style="color:#93a1a1;"><span></span></span><span style="color:#48484c;"><span></span></span><span style="color:#93a1a1;"><span></span></span></code>
引用的插件:ajaxfileupload.js
jQuery.extend({ { createUploadIframe: function(id, uri) { //create frame var frameId ='jUploadFrame'+ id; var iframeHtml ='<iframe id="'+ frameId +'" name="'+ frameId +'" style="position:absolute; top:-9999px; left:-9999px"'; if(window.ActiveXObject) { if(typeof uri=='boolean'){ iframeHtml +=' src="'+'javascript:false'+'"'; } elseif(typeof uri=='string'){ iframeHtml +=' src="'+ uri +'"'; } } iframeHtml +=' />'; jQuery(iframeHtml).appendTo(document.body); return jQuery('#'+ frameId).get(0); }, createUploadForm: function(id,fileElementId,data,fileElement) { //create form var formId ='jUploadForm'+ id; var fileId ='jUploadFile'+ id; var form = jQuery('<form action="" method="POST" name="'+ formId +'" id="'+ formId +'" enctype="multipart/form-data"></form>'); if(data) { for(var i in data) { jQuery('<input type="hidden" name="'+ i +'" value="'+ data[i]+'" />').appendTo(form); } } var oldElement; if(fileElement ==null) oldElement = jQuery('#'+ fileElementId); else oldElement = fileElement; var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //set attributes jQuery(form).css('position','absolute'); jQuery(form).css('top','-1200px'); jQuery(form).css('left','-1200px'); jQuery(form).appendTo('body'); return form; }, ajaxFileUpload: function(s){ // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id =newDate().getTime() var form = jQuery.createUploadForm(id, s.fileElementId,(typeof(s.data)=='undefined'?false:s.data),s.fileElement); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId ='jUploadFrame'+ id; var formId ='jUploadForm'+ id; // Watch for a new set of requests if( s.global &&! jQuery.active++) { jQuery.event.trigger("ajaxStart"); } var requestDone =false; // Create the request object var xml ={} if( s.global ) jQuery.event.trigger("ajaxSend",[xml, s]); // Wait for a response to come back var uploadCallback = function(isTimeout) { var io = document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerText:null; xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }elseif(io.contentDocument) { xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerText:null; xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s, xml,null, e); } if( xml || isTimeout =="timeout") { requestDone =true; var status; try{ status = isTimeout !="timeout"?"success":"error"; // Make sure that the request was successful or notmodified if( status !="error") { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData( xml, s.dataType ); // If a local callback was specified, fire it and pass it the data if( s.success ) s.success( data, status ); // Fire the global callback if( s.global ) jQuery.event.trigger("ajaxSuccess",[xml, s]); }else jQuery.handleError(s, xml, status); }catch(e) { status ="error"; jQuery.handleError(s, xml, status, e); } // The request was completed if( s.global ) jQuery.event.trigger("ajaxComplete",[xml, s]); // Handle the global AJAX counter if( s.global &&!--jQuery.active ) jQuery.event.trigger("ajaxStop"); // Process result if( s.complete ) s.complete(xml, status); jQuery(io).unbind() setTimeout(function() {try { jQuery(io).remove(); jQuery(form).remove(); }catch(e) { jQuery.handleError(s, xml,null, e); } },100) xml =null } } // Timeout checker if( s.timeout >0) { setTimeout(function(){ // Check to see if the request is still happening if(!requestDone ) uploadCallback("timeout"); }, s.timeout); } try { var form = jQuery('#'+ formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method','POST'); jQuery(form).attr('target', frameId); if(form.encoding) { jQuery(form).attr('encoding','multipart/form-data'); } else { jQuery(form).attr('enctype','multipart/form-data'); } jQuery(form).submit(); }catch(e) { jQuery.handleError(s, xml,null, e); } jQuery('#'+ frameId).load(uploadCallback); return{abort: function(){ try { jQuery('#'+ frameId).remove(); jQuery(form).remove(); } catch(e){} }}; }, uploadHttpData: function( r, type ){ var data =!type; data = type =="xml"|| data ? r.responseXML: r.responseText; // If the type is "script", eval it in global context if( type =="script"){ jQuery.globalEval( data ); }elseif( type =="json"){ eval("data = "+ data ); }elseif(type =="html"){ jQuery("<div>").html(data).evalScripts(); } return data; }, handleError: function( s, xml, status, e ){ // If a local callback was specified, fire it if( s.error ) s.error( xml, status, e ); // Fire the global callback if( s.global ) jQuery.event.trigger("ajaxError",[xml, s, e]); } });
js
$.ajaxFileUpload({url : ctx+"/media/uploadImages",
// secureuri : false,//安全
type:"Post",
dataType:'json',
data :{
"questionMainId": getQuestionMainId,
"imageType": imageType,
"pictureID":pictureID
},
fileElementId :"fileCoursePoster",// 文件选择框的id属性
success : function(data, status){
alert("上传成功!");
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("上传失败!");
}
});
后台
1.封装的java类/**
* mongo底层代码,由于底层代码没有我需要的东西,只能在这里重新写一遍了
* 十一期 谭倩倩
* @MethodName : getMongo
* @Description : 获取数据连接
* @return 返回mongon
*/
privateMongo getMongo(){
Mongo mongo=null;
try{
mongo =newMongo("192.168.22.246",27017);
}catch(Exception e){
e.printStackTrace();
}
return mongo;
}
/**
* mongo底层代码,由于底层代码没有我需要的东西,只能在这里重新写一遍了
* 十一期 谭倩倩
* @MethodName : uploadFile
* @Description : 上传文件
* @param file :文件,File类型
* @param delPictureID :唯一标示文件,可根据id查询到文件.必须设置
* @param dbName :库名,每个系统使用一个库
* @param collectionName:集合名,如果传入的集合名库中没有,则会自动新建并保存
* @param map:放入你想要保存的属性,例如文件类型(“congtentType”".jpg"),字符串类型,区分大小写,如果属性没有的话会自动创建并保存
*/
publicvoid uploadFileByObjectId(File file ,ObjectId delPictureID,String dbName,String collectionName,LinkedHashMap<String,Object> map){
//把mongoDB的数据库地址配置在外部。
try{
Mongo mongo =getMongo();
//每个系统用一个库
DB db= mongo.getDB(dbName);
System.out.println(db.toString());
//每个库中可以分子集
GridFS gridFS=newGridFS(db,collectionName);
// 创建gridfsfile文件
GridFSFile gridFSFile = gridFS.createFile(file);
//将文件属性设置到
gridFSFile.put("_id", delPictureID);
//循环设置的参数
if(map !=null&& map.size()>0){
for(String key : map.keySet()){
gridFSFile.put(key, map.get(key));
}
}
//保存上传
gridFSFile.save();
}catch(Exception e){
e.printStackTrace();
}
}
2.Controller代码
/**
* 十一期 谭倩倩
* 上传图片
* @param filePhone
* @param request
* @param response
* @throws IOException
*/
@RequestMapping(value ="media/uploadImages", produces ="text/plain;charset=UTF-8")
@ResponseBody
publicvoid uploadImages(HttpServletRequest request,HttpServletResponse response)
throwsIOException{
QuestionMain enQuestionMain=null;
String getPath=null;
String dataBaseName =(String) request.getSession().getAttribute(CloudContext.DatabaseName)+DataBaseClass.getExamdatabase();
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)request;
String fileName="";
String questionMainId=request.getParameter("questionMainId");
ObjectId pictureID=ObjectId.get();
String delPictureID=pictureID.toString();
System.out.println(delPictureID);
for(Iterator it=multipartRequest.getFileNames();it.hasNext();){
String key=(String)it.next();
MultipartFile nulfile=multipartRequest.getFile(key);
fileName=nulfile.getOriginalFilename();
//File getFilePath=new File(fileName);
String logoRealPathDir = request.getSession().getServletContext().getRealPath(fileName);
File localFile =newFile(logoRealPathDir);
LinkedHashMap map =newLinkedHashMap();
String mongoDbName ="exam";
String collectionName ="aa";
MongoUtil mongoUtil =newMongoUtil();
nulfile.transferTo(localFile);
try{
this.uploadFileByObjectId(localFile, pictureID, mongoDbName, collectionName,map);
System.out.println("导入图片成功!!");
}catch(Exception e){
System.out.println("导入图片失败!!");
}
try{
enQuestionMain=questionMainBean.queryQuestionMainById(questionMainId, dataBaseName);
System.out.println("查询题干成功");
enQuestionMain.setImageName(delPictureID);
enQuestionMain.setDataBaseName(dataBaseName);
boolean flag=paperMainBean.updateQuestionMain(enQuestionMain);
if(flag==true){
System.out.println("更新成功");
}
}catch(Exception e){
System.out.println("更新失败");
}
getPath="http://192.168.22.248/exam/"+pictureID;;
}
jacksonJson.beanToJson(response,getPath);
}
相关文章推荐
- itoo在线编辑学习——nignx
- 通达OA-今日学习:OFFICE文档在线编辑控件与工作流表单手写签章控件的区别是什么?
- 在线学习的网站,以后陆续编辑
- seafile学习五 之 Office文件在线编辑
- 【总结】ITOO在线编辑性能优化——多线程
- 通达OA-今日学习:OFFICE文档在线编辑控件与工作流表单手写签章控件的区别是什么?
- FlashCom学习例子: 在线拍大头照(项目使用Flash8+VS2005)
- JavaScript实现在线编辑表格
- 可在线编辑的表格
- 在线编辑office文件 保存到服务器设置
- SWING学习:JTable实现自定义的编辑单元格 (2)
- webserver和fileserver的分离实现方案以及对fileserver上的office文档实现在线编辑的实现
- Office文档在线编辑的实现之一
- Community Server 2.0 学习笔记:如何实现在线人数?
- 在IFRAME中编辑(HTML文本在线编辑器原理之一)
- WebOffice(在线Office编辑)
- WJOnlineEditor傲杰文档在线编辑控件
- [BiYii.com]在线编辑图片,在线的Fireworks...
- 在线去除pdf主口令,恢复PDF编辑、打印等权限
- C&C++标准库学习资料[在线]