實現功能：添加一個學生，該學生信息包括我的圖片，圖片上傳到服務器上，數據庫保存圖片的文件名，在查看學生列表時能夠看到圖片，同時在選擇要上傳的圖片以後能夠直接在前端顯示。html
實現效果：在選擇圖片以後，點擊上傳照片，將圖片上傳到服務器上，而後點擊保存，將學生的全部信息保存到數據庫中前端
實現過程（前端使用easyui框架）：ajax
一、添加學生信息同時實現圖片上傳功能以及選擇圖片文件以後及時在前端顯示數據庫
<div id="addStu" class="easyui-dialog" title="添加" style="width:400px;height:460px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,closable:false,
buttons:[{
text:'保存',
handler:saveStu
},{
text:'關閉',
handler:closewin
}]
">
<form id="stuform" enctype="multipart/form-data" action="">
<input type="hidden" name="sid" value="">
<table align="center">
<tr>
<td >學號 ：</td>
<td><input id="stu_id" name="stu_id" type="text" class="easyui-textbox" > </td>
</tr>
<tr>
<td>姓名：</td>
<td><input id="stu_name" type="text" name="stu_name" class="easyui-textbox" ></td>
</tr>
<tr>
<td>性別：</td>
<td><input name="sex" type="radio" value="男"/>男
<input name="sex" type="radio" value="女"/>女
</td>
</tr>
<tr>
<td width="75">出生日期：</td>
<td><input id="birthdate" name="birthdate" type= "text" class= "easyui-datebox" required ="required" /></td>
</tr>
<tr>
<td>QQ：</td>
<td><input id="qq" name="qq" type="text" class="easyui-textbox"/></td>
</tr>
<tr>
<td>手機號碼：</td>
<td><input id="phone_num" name="phone_num" type="text" class="easyui-textbox"></td>
</tr>
<tr>
<td>學院信息：</td>
<td><input id="college_id" name="college_id" class="easyui-combobox"
data-options="valueField:'id',textField:'college_name',url:'/dorm_system/college/getAllCollege.action'"/></td>
</tr>
<tr>
<td>宿舍信息：</td>
<td><input id="dorm_id" name="dorm_id" class="easyui-combobox"
data-options="valueField:'id',textField:'allDormInfo',url:'/dorm_system/dorm/getAllDorm.action'"></td>
</tr>
<tr>
<td>照片：</td>
<td>
<img id="stu_pic" width="62" height="69">
</td>
</tr>
<tr>
<td></td>
<td>
<input id="pic_url" type="file" name="pic_url" />
<input type="button" onclick="uploadPic()" value="上傳照片"/>
</td>
</tr>
</table>
</form>
</div>服務器
<script>session
//選擇好圖片以後及時顯示圖片app
$(document).off('change','pic_url').on('change','#pic_url',function(){框架
$('#stu_pic').attr('src',URL.createObjectURL($(this)[0].files[0]));dom
});post
//上傳圖片方法
function uploadPic(){
var stuform=new FormData($('#stuform')[0]);
$.ajax({
url:'/dorm_system/stu_pic/uploadFile.action',
type:'post',
contentType:false,
processData:false,
data:stuform,
success:function(msg){
$.messager.alert(msg);
}
})
}
//保存數據到數據庫的方法
function saveStu(){
var stuform=new FormData($('#stuform')[0]);
$.ajax({
url:'/dorm_system/student/saveStudent.action',
type:'post',
contentType:false,
processData:false,
data:stuform,
success:function(msg){
$('#stuform').form('clear');
$('#stu_pic').attr('src','');
$(’#addStu‘).dialog('close');
$.messager.alert(msg);
}
})
}
</script>
uploadFile.action的後臺代碼：
@RequestMapping(value="/uploadFile.action",produces="text/html;charset=utf-8",method=RequestMethod.POST)
public @ResponseBody String uploadFile(HttpSession session,@RequestParam(value="pic_url",required=false) MultipartFile uploadPic)
{
//文件保存在服務器上的地址
String path="D:\\upload_file\\";
if((uploadPic!=null)&&(!uploadPic.isEmpty()))
{
//獲取源文件的名稱
String oldName=uploadPic.getOriginalFilename();
//獲取文件的後綴名
String prefixName=FilenameUtils.getExtension(oldName);
int fileSize=500000;
//限制文件上傳的大小不超過500k
if(uploadPic.getSize()>fileSize)
{
return "上傳的文件不超過500k"；
}else if(prefixName.equalsIgnoreCase("jpg")||prefixName.equalsIgnoreCase("png")||prefixName.equalsIgnoreCase("jpeg")||prefixName.equalsIgnoreCase("pneg"))//判斷文件上傳的格式
{
String filename=System.currentMillis()+RandomUtils.nextInt(1000000)+"stupic.jpg";//上傳到服務器的文件名稱
File file=new File(path,filename);
if(!file.exists())
{
file.mkdirs();
}
try {
uploadPic.transferTo(file);
session.setAttribute("uploadPic", fileName);
return "上傳成功";
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return "上傳失敗";
}
}
return "請選擇所要上傳的文件";
}
saveStudent.action的後臺代碼
@RequestMapping(value="/saveStudent.action",method=RequestMethod.POST,produces="text/html;charset=utf-8")
public @ResponseBody String saveStudent(HttpSession session,Student stu,String sid)
{
try {
String uploadPic=(String) session.getAttribute("uploadPic");
System.out.println("=====uploadPic: "+uploadPic);
stu.setPicture_url(uploadPic);
if(sid==null||sid.equals(""))
{
stuService.insertStudent(stu);
}
else
{
stu.setId(Integer.parseInt(sid));
stuService.updateStudent(stu);
}
return "操做成功";
} catch (Exception e) {
e.printStackTrace();
}
return "操做失敗"
}
二、根據數據庫保存的圖片名稱顯示保存在服務器上的圖片信息
前端代碼：其中row.picture_url就是數據庫中保存的圖片文件數據
<img src='/dorm_system/stu_pic/IoReadImage/’+row.picture_url+‘.action' +"width='60' height='65'/>
後臺代碼：
@RequestMapping(value="/IoReadImage/{imgName}.action",method=RequestMethod.GET)
public void IoReadImage(@PathVariable String imgName,HttpServletRequest request,HttpServletResponse response)
{
response.setContentType("multipart\form-data");
ServletOutputStream out=null;
FileInputStream ips=null;
try{
String picPath="D:\\upload_file\\"+imgName;
File file=new File(picPath);
ips=new FileInputStream(file);//獲取文件的輸入流
out=response.getOutputStream();
byte[] buffer=new byte[1024*10];
int len=0;
while((len=ips.read(buffer)!=-1)
{
out.write(buffer,0,len);
}
out.flush();
}catch(Exception e)
{
e.printStackTrace();
}finally{
out.close();
ips.close();
}
}