最近在工作中需要用到ajax异步上传图片功能, 然而ajax原生不支持, 所以我在网上也查阅了很多资料, 最后成功实现
网上类似的文章肯定很多, 在这之前我也参考了参考了好多资料 ,最终才完成这个功能 ,.这篇文章的方法可行性,也是经过了我的验证的, 就姑且写个原创吧 ...
文章的内容有人很简单, 大神轻喷....
首先说上传吧
ajax异步上传图片功能, 需要借助 jquery 的第三方插件 jquery-form.js 插件
前端使用的html, Java使用的是常用的Spring MVC + mybatis + spring三大框架
关于三大框架的配置文件怎么写, 我就不多说了
就说说与spring MVC文件上传的相关的配置吧.
配置文件上传解析器 :
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 指定所上传文件的总大小不能超过4000KB。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
<property name="maxUploadSize" value="10485760"/>
<property name="defaultEncoding" value="utf-8" />
</bean>
<!-- 指定所上传文件的总大小不能超过4000KB。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
<property name="maxUploadSize" value="10485760"/>
<property name="defaultEncoding" value="utf-8" />
</bean>
OK , 现在直接上代码
html 代码:
<!-- 引入jquery插件, 实现jquery ajax异步上传文件 -->
<script type="text/javascript" src="./js/jquery-form.js"></script>
<input type="file" name ="venderFileName" id="filePath" onchange = "venderFileUpload()"/>
js 代码:
//文件上传
function venderFileUpload(){
var option = {
type :"POST",
url : pubJson.getURL("FormUrl") + "/venderFile/fileUpload.do", //后台上传Java方法地址
dataType : "text",
data : {
fileName : 'venderFileName', // 必填参数 : 文件名称, 为 input 框的 name 值
// companyId : zcxx01 //选填参数 : 所需要传递到后台的值.
},
success : function(data){
// 上传成功后的回调函数
//返回文件名称以及文件路径
}
};
$("#venderFileForm").ajaxSubmit(option);
后台Java类:
@RequestMapping("/fileUpload.do")
public void fileUpload(HttpServletRequest request, String fileName, PrintWriter out)
throws IllegalStateException, IOException {
// 把Request强转成多部件请求对象
MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
// 根据文件名称获取文件对象
CommonsMultipartFile cm = (CommonsMultipartFile) mh.getFile(fileName);
// 可选, 获取文件名称
String originalFilename = cm.getOriginalFilename();
// 可选, 获取文件后缀名称
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//进行一些列的防文件重名处理
String
newFileName = ""; //写上经过处理后的文件名, 一般是是通过当前时间来命名的
String path = ""; //你所想要保存的文件目录
String filename = path + "/" + newFileName+
suffix;
File file = new File(filename);
if (!file.exists()) {
file.mkdirs();
}
cm.transferTo(file);
// 返回文件路径及文件名称
String result = ""; //你想返回的数据
out.print(result);
}
下面说说文件下载
Java代码:
@RequestMapping("/download.do")
public String download(String fileName, HttpServletRequest request,
HttpServletResponse response) {
response.setCharacterEncoding("utf-8");
response.setContentType("multipart/form-data");
response.setHeader("Content-Disposition", "attachment;fileName="
+ fileName);
try {
String path = ""; //拼接好自己文件服务器地址 (不包含fileName)
InputStream inputStream = new FileInputStream(new File(path
+ File.separator + fileName));
OutputStream os = response.getOutputStream();
byte[] b = new byte[2048];
int length;
while ((length = inputStream.read(b)) > 0) {
os.write(b, 0, length);
}
// 关闭输入输出流。
os.close();
inputStream.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
// 返回值要注意,要不然就出现下面这句错误!
// java+getOutputStream() has already been called for this response
return null;
}
浏览器直接输入 Java 方法的访问地址 加上需要下载的文件名 即可下载
例如: 127.0.0.1:8080/项目名称/Java类的requestMapping/
download.do即可