JFinal使用ajaxfileupload实现图片上传及预览

本文实例为大家分享了JFinal使用ajaxfileupload实现图片上传预览的具体代码，供大家参考，具体内容如下

1.前端jsp页面核心代码

 
<%=request.getContextPath() %>/media/file/${banner.img}" style="width:300px;height:100px;" id="imgsrc"/>

function ajaxFileUpload(fileEid, paramdata){
 if(typeof(paramdata)=='undefined') paramdata = {};
 var $file=$('#'+fileEid).val();
 if($file=='') {alert("请先选择对应的上传文件，谢谢"); return;}

 $.ajaxFileUpload({
 url:'<%=request.getContextPath()%>/banner/uploadpic',
 secureuri:false,
 fileElementId:fileEid,
 dataType: 'text',
 data:paramdata,
 success: function (result){
  var result = result.substring(result.indexOf("{"),result.indexOf("}")+1);
  result = eval("("+result+")");

  if(result.t==1){
  $("#imgsrc").attr("src","<%=request.getContextPath() %>/media/file/"+result.msg);
  $("#imgurl").val(result.msg);
  }else{
  alert("上传失败");
  }
 }
 });
}

2.后台核心代码

public void uploadpic(){
 UploadFile upfile = getFile();//JFinal规定getFile()必须最先执行
 File file = upfile.getFile();
 String filename = file.getName();
 String delfilename = filename;
 if(filename!=null && !filename.equals("")){
 filename = new SimpleDateFormat("yyyyMMddkkmmss").format(new Date())+filename;
 
 String path = getRequest().getSession().getServletContext()
  .getRealPath("/");
 String newPath = "/media/file/";//自定义目录 用于存放图片
 
 File floder = new File(path + newPath);
 if (!floder.exists()) {
  floder.mkdirs();
 }
 
 FileInputStream fis = null;
 FileOutputStream fos = null;
 try{
  File savePath = new File(path + newPath + filename);
  if(!savePath.isDirectory()) savePath.createNewFile();
  fis = new FileInputStream(file);
  fos = new FileOutputStream(savePath);
  byte[] bt = new byte[300];
  while (fis.read(bt, 0, 300) != -1) {
  fos.write(bt, 0, 300);
  }
 }catch(Exception e){
  e.printStackTrace();
 }finally{
  try{
  if(null!=fis) fis.close();
  if(null!=fos) fos.close();
  }catch(Exception e){
  e.printStackTrace();
  }
 }

 
 File delFile = new File(path+"/upload/"+delfilename);
 if(delFile.exists()){
  delFile.delete();
 }
 setAttr("msg",filename);
 setAttr("t",1);
 }else{
 setAttr("t",0);
 }
 renderJson();
}

附：ajaxfileupload.js代码

jQuery.extend({
 createUploadIframe: function(id, uri) {
 //create frame
 var frameId = 'jUploadframe' + id;
 var iframeHtml = '