项目中需要用到上传图片的功能,经各种查阅资料和实验,最终实现了利用ajaxupload.js异步提交数据上传图片。因为需要在项目针对移动端,顾把input设为了透明,再另做按钮调用。为了有同需求的人,特此整理如下:
上传文件,用的是input type=“file”加了一个属性:accept=”image/*” 限制上传文件的类型,当然也可以用此例子来上传其他文件。
jsp代码:
首先引入js
<script type="text/javascript" src="/resources/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/resources/js/ajaxfileupload.js"></script>
ajaxfileupload.js 网上可以下载到,但因为常年不更新,其中有些方法出现了问题,大家可以下载我上传的文件,我已经参照资料修改好了。
<input type="file" style="opacity: 0;" accept="image/*" id="uploadFile" name ="thefile" onchange="ajaxFileUpload();">
<!-- style="opacity: 0;",这是用来隐藏该input的,以设置为透明的原理,如果大家在pc端或者需要显示,可以去掉。 -->
<!-- 设置 onchange="ajaxFileUpload();" 属性,实现当选择完文件后,直接执行上传函数 -->
<div onclick="fileUplod();">任意设置</div><!-- 这个div只是示例,可以设置想要的样式,甚至放一张图片,调用另一个函数来执行选择文件 -->
function fileUplod(){
$("#uploadFile").trigger("click");
}
function ajaxFileUpload() {
var img=$('#uploadFile').val();
//alert(img);
if(img==null||img==""){
alert("请选择封面图片!");
return false;
}else{
$.ajaxFileUpload({
url:'/column/upload', //服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'uploadFile', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
enctype:'multipart/form-data',//注意一定要有该参数
success: function (data) //服务器成功响应处理函数
{
data = eval("("+data.split(">")[1]+")");
//当设置为json返回类型的时候,不知道为什么解析出来有问题,我需要的是返回的map,为了能成功解析,所以用此语句删掉了map前的一个头,在js里面我已把map后的头去掉了。
if(data.code=='999'){
//alert(data.msg); //data是从服务器返回来的值
}else{
data = eval("("+data.split(">")[1]+")");
alert(data.msg); //data是从服务器返回来的值
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
data = eval("("+data.split(">")[1]+")");
alert(data.msg);
}
})
}
}
</script>
java代码:
/**
* 上传图片方法
* */
@ResponseBody
@RequestMapping(value="/column/upload")
public Object upLoad(HttpServletRequest request, HttpServletResponse response)
throws IllegalStateException, IOException{
//获取上传路径,这里我是配置在我的文件中,如果没有配置,可以直接定义上传路径。
String publicuploadpath = ResourcePropertiesParam.getParam("publicuploadpath");
Map<String,String> map = new HashMap<>();
//解析器解析request的上下文
CommonsMultipartResolver multipartResolver =
new CommonsMultipartResolver(request.getSession().getServletContext());
//先判断request中是否包涵multipart类型的数据,
if(multipartResolver.isMultipart(request)){
//再将request中的数据转化成multipart类型的数据
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
Iterator iter = multiRequest.getFileNames();
while(iter.hasNext()){
MultipartFile file = multiRequest.getFile((String)iter.next());
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
if(file != null&&!"".equals(file)){
String fileName = ApplicationUtils.randomUUID()+new Date().getTime();
String path = publicuploadpath+"/"+sdf.format(new Date())+"/"+ fileName+".jpg";
File localFile = new File(path);
if (!localFile.exists()) {
localFile.mkdirs();
}
//保存文件
file.transferTo(localFile);
//获取访问路径
String publicurlString = ResourcePropertiesParam.getParam("publicfilewebsiteurl")+"/"+sdf.format(new Date())+"/"+ fileName+".jpg";
//因为项目中的图片会上传到图片的服务器,所以在访问路径是单独配置的,如果没有配置,可以自己手动修改访问路径。
map.put("code","999");
map.put("msg","上传成功");
map.put("picurl", publicurlString);
}else{
map.put("code","000");
map.put("msg","上传失败");
}
}
}
return map;
}
当然,因为是springMVC的框架中,所以还得在spring-mvc.xml配置bean:
<!-- 配置springMVC处理上传文件的信息 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<property name="maxUploadSize" value="10485760000"/>
<property name="maxInMemorySize" value="40960"/>
</bean>
以上就能是先上传图片功能,不必刷新页面,也不用提交表单,也不用…
当然这个demo可以由更多的扩展性,比如检测到值改变js设置某个img的路径,就能实现预览的效果,当然具体还是看大家自行发挥了。
ajaxupfileload.js文件的下载地址:http://download.csdn.net/detail/qq_34273222/9737793
如果代码有任何问题,请在下方留言。一起学习,一起进步!