一、前台
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);
}