1、ajaxfileupload.js
今天研究一下了ajaxfileupload.js，简单的实现一下文件传入服务器的流程。测试环境环境SpringMVC
2、引入依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
3、在spring配置中配置视图解析器
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
4、页面index.jsp
<%-- Created by IntelliJ IDEA. User: shadow Date: 2015/11/28 Time: 21:36 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/ajaxfileupload.js"></script>
<script type="text/javascript"> function ajaxFileUpload(){ var uname = "shadow"; //开始上传文件时显示一个图片,文件上传完成将图片隐藏 //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();}); //执行上传文件操作的函数 $.ajaxFileUpload({ //处理文件上传操作的服务器端地址(可以传参数,已亲测可用) url:'/test/fileUpload?uname=' + uname,secureuri:false,//是否启用安全提交,默认为false fileElementId:'myBlogImage',//文件选择框的id属性 dataType:'text',//服务器返回的格式,可以是json或xml等 success:function(data,status){ //服务器响应成功时的处理函数 /* data = data.replace("<PRE>",''); //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀 data = data.replace("</PRE>",''); data = data.replace("<pre>",''); data = data.replace("</pre>",''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath] if(data.substring(0,1) == 0){ //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述) $("img[id='uploadImage']").attr("src",data.substring(2)); $('#result').html("图片上传成功<br/>"); }else{ $('#result').html('图片上传失败，请重试！！'); }*/ $('#result').html('修改头像成功' + data); },error:function(data,status,e){ //服务器响应失败时的处理函数 $('#result').html('图片上传失败，请重试！！'); } }); } </script>
</head>
<body>
<div id="result"></div>
<input type="file" id="myBlogImage" name="myfiles"/>
<input type="button" value="上传图片" onclick="ajaxFileUpload()"/>
</body>
</html>
5、后台接受前端传入的文件
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.multipartfile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/** * Created by shadow on 2015/11/29. */
@Controller
@RequestMapping("/test")
public class FileUploadController {
@RequestMapping(value = "/fileUpload")
public String addUser(@RequestParam("uname") String uname,@RequestParam multipartfile[] myfiles,HttpServletRequest request,HttpServletResponse response) throws IOException {
response.setContentType("text/plain; charset=UTF-8");
System.out.println("上传用户:" + uname);
//设置响应给前台内容的PrintWriter对象
PrintWriter out = response.getWriter();
//上传文件的原名(即上传前的文件名字)
String originalFilename = null;
//如果只是上传一个文件,则只需要multipartfile类型接收文件即可,而且无需显式指定@RequestParam注解
//如果想上传多个文件,那么这里就要用multipartfile[]类型来接收文件,并且要指定@RequestParam注解
//上传多个文件时,前台表单中的所有<input type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
for (multipartfile myfile : myfiles) {
if (myfile.isEmpty()) {
out.print("1`请选择文件后上传");
/*out.flush();*/
return null;
} else {
originalFilename = myfile.getoriginalFilename();
System.out.println("文件原名: " + originalFilename);
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
//保存
System.out.println("执行保存到服务器");
}
}
out.write("success");
return null;
}
}