即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

精选推荐 图片异步上传,JQuery封装的异步图片(文件)上传,后台框架运用

编程语言 suxiaoqiuking 26℃ 0评论

图片异步上传,JQuery封装的异步图片(文件)上传,后台框架使用;

先上html代码和效果图





My JSP 'index.jsp' starting page








 
图片 :



js代码

/**
 * 当图片加载错误时,设置一张默认的图片,免得尴尬^_^
 * @param img 设置的图片暂时是写死的,应该通过参数过来
 */
function setDefault(img,src){img.src=src; }

/**
 * 自己封装的jquery.ajax文件上传方法
 * @param fileInput 文件选择input
 * @param hiddenImgId 图片路径隐藏域,做数据库持久
 * @param showImgId 要展示上传后的图片img标签id
 */
function ajaxImgUpload(fileInput,hiddenImgId,showImgId){
 if(!isExt(fileInput)){
  alert("支持的图片文化上传格式暂只支持jpg,jpeg,png,bmp;请重新选择!");
  return;
 }
 var formData = new FormData();
    formData.append("header", fileInput.files[0]); 
    var url = "commom/file/upload";
    ajaxPost(url, {
     data : formData,
        contentType: false, //必须false才会自动加上正确的Content-Type
        processData: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
     success : function(ret){
      console.log(ret);
      if(ret.isOk){
       var path = ret.uploadPath+ret.fileName;
       document.getElementById(hiddenImgId).value = path;
       document.getElementById(showImgId).src = "commom/file/download?path="+path;
      }else{
       alert(ret.msg);
      }
     }
    })
}

/**
 * 判断后缀是否支持图片
 * @param fileName
 */
function isExt(fileInput){
 
 var exts = new Array("jpg","jpeg","png","bmp");
 //"\."做一个转义
 var values = fileInput.value.split("\.");
 //转小写  sn.toLowerCase()  转大写 sn.toUpperCase()
 var ext = values[values.length-1].toLowerCase();
 for(var s in exts){
  if(exts[s] === ext){
   return true;
  }
 }
 return false;
}

/**
 * ajaxPost请求
 * 支持文件上传,下面是注意事项:
 * var formData = new FormData();
 * formData.append("header", fileInput.files[0]); 
 * 必须false才会自动加上正确的Content-Type
 * 必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
 * contentType: false, processData: false,
 * @param url
 * @param options
 */
function ajaxPost(url,options){
 var defalutOptions = {
   type : 'POST',
   cache : false,
   data : {},
   dataType : 'json',
   contentType: true,
   processData: true,
   success : function(ret,textStatus,jqXHR){
    if(ret.isOk){
     alert(ret.msg);
    }else{
     alert(ret.msg);
    }
   },
   error : function(ret){
    alert("联系管理员!!!")
   },
   complete : function(XHR, TS){
    //console.log(XHR);
   }
   
 }
 for(var o in options){
  defalutOptions[o] = options[o];
 }
 $.ajax(url,defalutOptions);
}

/**
 * ajaxGet请求(请求数据相关)
 * @param url
 * @param options
 */
function ajaxGet(url,options){
 var defalutOptions = {
   type : 'GET',
   cache : false,
   data : {},
   dataType : 'json',
   success : function(ret,textStatus,jqXHR){
    if(ret.isOk){
     alert(ret.msg);
    }else{
     alert(ret.msg);
    }
   },
   error : function(ret){
    alert("联系管理员!!!")
   },
   complete : function(XHR, TS){
    //console.log(XHR);
   }
   
 }
 for(var o in options){
  defalutOptions[o] = options[o];
 }
 $.ajax(url,defalutOptions);
}




后台代码(JFinal实现)

package demo;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import javax.servlet.ServletOutputStream;

import com.jfinal.aop.Clear;
import com.jfinal.core.ActionKey;
import com.jfinal.core.Controller;
import com.jfinal.kit.Ret;
import com.jfinal.log.Log;
import com.jfinal.upload.UploadFile;

public class TestController extends Controller{
 
 private Log log = Log.getLog(getClass());
 
 public static final String extName = ".jpg";
 
 @ActionKey("/test")
 public void index(){
  render("index.html");
 }
 
 /**
  * 文件上传
  * @date 2017年6月7日
  * @author ChoxSu
  */
 @Clear
 @ActionKey("/commom/file/upload")
 public void updload(){
  
  System.out.println("go go go ");
  
  UploadFile file = null;
  try {
   file = getFile("header", getAvatarTempDir(), getAvatarMaxSize(), "UTF-8"); //getFile("img", getAvatarTempDir(), getAvatarMaxSize());
  } catch (Exception e) {
   String errmsg = "Posted content length of * exceeds limit of "+getAvatarMaxSize();
   if(e.getMessage().indexOf("exceeds limit of")>errmsg.length()){
    renderJson(Ret.fail("msg", "文件上传大小限制"+getAvatarMaxSize()));
   }else{
    renderJson(Ret.fail("msg", e.getMessage()));
   }
  }
  if(file == null){
   renderJson(Ret.fail("msg", "请选择图片"));
  }
  renderJson(Ret.ok("status", "SUCCESS").set("fileName", file.getFileName()).set("uploadPath", file.getUploadPath()));
 }
 
 /**
  * 文件下载
  * @date 2017年6月7日
  * @author ChoxSu
  */
 @Clear
 @ActionKey("/commom/file/download")
 public void download(){
  //JFinal 方式返回下载--推荐使用
  //renderFile(new File(uploadPath"D:\\upload_jyoga\\upload\\avatar\\agrzx4.png"));
  renderFile(new File(getPara("path")));
  //常规方式
  oldType();
 }
 
 @Deprecated
 private void oldType(){
  /*FileInputStream fi = null;
  ServletOutputStream os = null;
  
  byte[] b = new byte[2000];
  try {
   fi = new FileInputStream(new File("D:\\upload_jyoga\\upload\\avatar\\agrzx4.png"));
   os = getResponse().getOutputStream();
   while(fi.read(b)>0){
    os.write(b);
   }
   os.flush();
  } catch (Exception e) {
   log.error(e.getMessage(), e);
  }finally{
   try {
    if(os!=null){
     os.close();
    }
    if(fi!=null){
     fi.close();
    }
   } catch (IOException e) {
    log.error(e.getMessage(), e);
   }
  }
  renderNull();*/
 }

 public static String getAvatarTempDir() {
  return "/upload/avatar/temp/";
 }
 
 // 用户上传图像最多只允许5M大小
 public static int getAvatarMaxSize() {
  return 5 * 1024 * 1024;
 }
}




不吝啬^_^点个赞








转载请注明:CodingBlog » 精选推荐 图片异步上传,JQuery封装的异步图片(文件)上传,后台框架运用

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情