图片异步上传，JQuery封装的异步图片（文件）上传，后台框架使用;
先上html代码和效果图
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<form action="#(ctx)/test/upload" method="post">
图片 ： <input type="file" name="img" οnchange="ajaxImgUpload(this,'hiddenImgId','showImgId');"/><br />
<input type="hidden" id="hiddenImgId" name="header"/>
<div>
<img id="showImgId" alt="" οnerrοr="setDefault(this,'/testUploadFile/assets/img/loadFailed.png');"
src="#(ctx)/assets/img/noImage.png" width="300px" height="160px">
</div>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="#(ctx)/assets/js/common.js"></script>
</html>
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;
}
}
1531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
