导入 AjaxFileUpload.js 文件
js代码
$.ajaxFileUpload({
url: 'upload',//处理图片脚本
secureuri : false,
fileElementId : 'uploadImg',//file控件id
data: {photoType: photoType},//参数
dataType : 'json', //参数大写 否则谷歌浏览器可能报错
success : function (data,status){
data=jQuery.parseJSON(data);
$("#hideImgPath").val(data.filePath);
alert("上传图片成功!");
},
error: function(data, status, e){
alert("上传图片失败!请稍后重试!");
}
});
html代码
<span class="d">
<input type="file" id="uploadImg" name="uploadImg" value="" />
<input type="button" id="uploadImgButton" οnclick="uploadSaveImg();" value="确定上传" />
<input type="hidden" value="" id="hideImgPath" name="hideImgPath"/>
</br>格式一般为GIF或者JPEG,大小100*100像素;
</span>
java 代码
/**
* 方法描述: 上传属性值图片
* @author Andy 2014-8-14 下午02:09:50
*/
@RequestMapping("attribute/upload")
public void upload(HttpServletRequest request,HttpServletResponse response){
Map<String, Object> resultMap=new HashMap<String, Object>();
String imgName=getFileName();
String saveImgPath=request.getSession().getServletContext().getRealPath("/upload/image"); //项目图片保存路径
File fileIMG=new File(saveImgPath);//图片保存路径
if (!fileIMG.exists()) {
fileIMG.mkdirs();
}
try {
String filePath="";
MultipartHttpServletRequest mhs = (MultipartHttpServletRequest) request;
MultipartFile file = mhs.getFile("uploadImg");
String photoType=mhs.getParameter("photoType");
imgName = imgName+"."+photoType;
if(file!=null){
filePath = SaveFileFromInputStream(file.getInputStream(),saveImgPath,imgName);
}
resultMap.put("filePath","upload/image/"+imgName);
resultMap.put("imgName",imgName);
} catch (Exception e) {
logger.error(e.getMessage());
System.out.println("上传图片失败,请重试!");
}
resultMap.put("status", "true");
displayToJson(resultMap, response);
}
/**
* 方法描述: 保存图片
* @param stream
* @param path
* @param filename
* @return
* @throws IOException String
* @author Andy 2014-8-14 下午02:59:10
*/
public String SaveFileFromInputStream(InputStream stream,String path,String filename) throws IOException{
String filePath = path + File.separator+ filename;
FileOutputStream fs=new FileOutputStream(filePath);
byte[] buffer =new byte[1024*1024];
int bytesum = 0;
int byteread = 0;
while ((byteread=stream.read(buffer))!=-1){
bytesum+=byteread;
fs.write(buffer,0,byteread);
fs.flush();
}
fs.close();
stream.close();
return filePath;
}
/**
* 方法描述: 获取文件的名称
* @return String
* @author Andy 2014-8-15 上午09:51:58
*/
public static String getFileName(){
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str=sdf.format(new Date()).replace(" ", "-").split(":")[0];
String sop=Long.toString(System.currentTimeMillis());
sop=sop.substring(5, sop.length());
return str+"-"+sop; //2014-08-15-10-68194635 日期-小时
}
解决办法:在springMVC配置文件中 添加如下配置信息:
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
同时设置返回数据的类型: response.setContentType("text/plain;charset=UTF-8");
所遇问题2:返回的数据中带有<pre> 标签
解决办法: 将AjaxFileUpload.js文件中 eval( "data = " + data ); 改成 data = jQuery.parseJSON(jQuery(data).text());
此时如果在页面上还是无法解析时,请再将 返回数据转成Json 一遍 data=jQuery.parseJSON(data);
所遇问题3: 在使用springMVC时 后台接收不到 前台的 File 时 报错:
nested exception is java.lang.NoClassDefFoundError:org/apache/commons/io/output/DeferredFileOutputStreamat
org.springframework.web.servlet.DispatcherServlet.triggerAfterCompletionWithError(DispatcherServlet.java:1259)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:945)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:856)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:915)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:822)
java.lang.ClassNotFoundException: org.apache.commons.io.output.DeferredFileOutputStream
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1358)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1204)
at org.apache.commons.fileupload.disk.DiskFileItemFactory.createItem(DiskFileItemFactory.java:199)
解决办法: 1、 添加 commons-io-1.3.1.jar 包 ,此包是上传所依赖的包 。
2、如果添加此包后还是提示找不到本包 原因可能有两点:①、tomcat 没有加载本包,此时请到tomcat下 将此包勾选上 。 ②如果出现本包冲突时 将tomcat下
的同名jar包 删掉