文件上传并且把文件名字保存到数据库(java+js代码)

  • Post author:
  • Post category:java


新手的我在前几天一直在学习上传文件这一块儿,一直不明白没有弄出来,不过好的是在今天终于研究出来了。如果有不足的地方还请大神们多多指点,小弟好纠正,废话不多说直接上代码,代码里面也有注释一看便知。

文件上传java后台代码如下:

/**

* 文件上传Action;

* @param mapping

* @param form

* @param request

* @param response

* @return

* @throws Exception

*/

public ActionForward empupload(ActionMapping mapping, ActionForm form,

HttpServletRequest request,HttpServletResponse response) throws Exception{


//消息提示

String message = “”;

request.setCharacterEncoding(“utf-8”);

response.setCharacterEncoding(“utf-8”);

//1、创建一个DiskFileItemFactory工厂

DiskFileItemFactory factory = new DiskFileItemFactory();

//2、创建一个文件上传解析器

ServletFileUpload upload = new ServletFileUpload(factory);

//解决上传文件名的中文乱码

upload.setHeaderEncoding(“UTF-8”);

factory.setSizeThreshold(1024 * 500);//设置内存的临界值为500K

//把文件放到固定的地方;

String savePath = request.getSession().getServletContext().getRealPath(“/outfile”);

File linshi = new File(savePath);//当超过500K的时候,存到一个临时文件夹中

factory.setRepository(linshi);

upload.setSizeMax(1024 * 1024 * 10);//设置上传的文件总的大小不能超过10M

try {

// 1. 得到 FileItem 的集合 items

List<FileItem> /* FileItem */items = upload.parseRequest(request);

// 2. 遍历 items:

for (FileItem item : items) {

//文件名字;

String fileName = item.getName();

Writer w = response.getWriter();

//上传成功后返回文件名字;

w.append(fileName);

//文件大小;

long sizeInBytes = item.getSize();

System.out.println(fileName);

System.out.println(sizeInBytes);

//获取intem中的上传输出流;

InputStream in = item.getInputStream();

//创建一个缓冲区;

byte[] buffer = new byte[1024];

//判断是否流读完的一个标识;

int len = 0;

//判断上传文件的保存目录是否存在

if (!linshi.exists() && !linshi.isDirectory()) {


System.out.println(savePath+”目录不存在,需要创建”);

//创建目录

linshi.mkdir();

}

fileName = request.getRealPath(“/”)+”outfile/”+fileName;//文件最终上传的位置

System.out.println(fileName+”下一步!!!”);

//创建一个输出流;

OutputStream out = new FileOutputStream(fileName);

//读取文件并且输入到savePath文件里;

while ((len = in.read(buffer)) != -1) {

out.write(buffer, 0, len);

}

out.close(); //关闭输出流;

in.close();  //关闭输入流;

//删除处理文件上传时生成的临时文件

item.delete();

message = “文件上传成功!”;

System.out.println(message);

// return mapping.findForward(“success”);

}

} catch (FileUploadException e) {

e.printStackTrace();

message = “文件上传失败!”;

System.out.println(message);

}

return null;

}

js要引用:ajaxupload.js    这个可以在网上直接下载即可。

文件上传前台代码html加JS如下:

html:

<form id=”form” name=”form” method=”post”>

<div id=”sj”>

<label id=”wj” style=”color:red;margin-left: 10%”>上传文件:</labl>

<input id=”filea” type=”text” name=”image” class=”form-control” />

<button id=”file1″ type=”button” value=”上传” οnclick=”submi()”>上传</button>

</div>

<div id=”butt”>

<button type=”button” class=”btn btn-success”  id=”buttontrue” οnclick=”addemp()”>确  定</button>

<button type=”button” class=”btn btn-danger” id=”cole” οnclick=”cole()”>取  消</button>

</div>

</form>

js:

$(document).ready(function(){


var upload=new AjaxUpload($(“#file1”),{


//调用action;

action:’empSelect.do?method=empupload’,

//筛选后提交文件;

autoSubmit:true,

// 文件上传时调用

// 您可以通过设置返回false 取消上传

// @参数1,file为上传文件的文件名

// @参数2,ext为那个文件(后缀名)

onSubmit: function (file,ext) {


$(“#buttontrue”).attr(“disabled”,”disabled”);//禁止此控件操作

$(“#cole”).attr(“disabled”,”disabled”);//禁止此控件操作

},

//提交文件后调用;

onComplete:function(file,response){


alert(response);

alert(file);

this.enable();

//获取文本里的值;

var file=$(“#filea”).val();

if(file != “”){


file =file+”,”; //可以重复上传

}

//var data = eval(“(” +file, response+ “)”);

document.getElementById(“filea”).value=file+response; //上传成功后后台把文件名字返回到前台并且赋给“file”。

$(“#buttontrue”).removeAttr(“disabled”);

$(“#cole”).removeAttr(“disabled”);

alert(“上传成功”);

},

responseType: ‘text’

});

当然这下面的就是比如上传文件的时候还有其他的字段需要存到数据库里则直接加到上面代码后面即可。

//提交表单添加至数据库;

$(“#form”).submit(function(){


$(this).ajaxSubmit({


beforeSubmit:function(){


var name=$(“#name”).val();

var sex=$(“#sex”).val();

var time=$(“#time”).val();

var depa=$(“#depa”).val();

var job=$(“#job”).val();

var id=$(“#id”).val();

var image=$(“#file”).val();

},

url:’empSelect.do?method=empadd’,

type:’post’,

success:function(data){


if(data){


alert(“添加成功!”);

}else{


alert(“添加失败!”);

}

}

});

});

});



版权声明:本文为Easet原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。