itoo在线编辑——mongo学习1

一、前台

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);
    }