操作步骤
第一步
在页面中的form表单里面增加一个input标签,请求方式是POST,文件上传需要依赖表单进行提交,但是表单页面不能
跳转,所以需要在界面上引入jquery.form.js插件,这个插件可以以ajax的方式提交表单,页面不用跳转
<input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' enctype=”multiport/form-data” />
第二步
需要在springmvc.xml中配置复杂类型的视图解析器
<bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”>
<property name=”maxUploadSize” value=”1024000”></property>
</bean>
第三步
需要在tomcat图片服务器的web.xml中DefaultServlet下方配置,要不然就不能上传了
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
第四步
在配置文件aa.properties里需要配置 图片服务器的地址,以便后期容易修改
upload_file_path=http://localhost:8080/。。。 //这是图片服务器的地址
第五步
创建一个类读取properties内容
Public class EeUtils{
Public static String redPro(String key){ //通过配置文件中地址名(upload_file_path)来查找对应的值
String values = null;
//读取配置文件
InputStream in= EeUtils.class.getClassLoader().getResourceAsSteam(“aa.properties”);
Properties pr = new Properties();
Pr.load(in);
Value = Pr.getProperty(key);
Return value;
}
}
第六步 代码实现
@RequestMapping(“/upload”)
@Controller
public class Upload{
@RequestMapping(“/uploadPic”)
Public void uploadPic(HttpServletRequest request,PrintWriter out,String lastRealPath){
//强制转化request
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//获取input的name值
Iterator<String> iter = mr.getFileNames();
String inputName = Iter.next();
//获得文件
MultipartFile mf = mr.getFile(inputName);
//把文件转换为字节数组
Byte[] mfs = mf.getBytes();
//为了方式图片名重复
String filename = new SimpleDateFormat(“yyyyMMddHHmmssSSS”).format(new Date());
Random random = new Random();
For(int i=0;i<3+i++){
filename = filename + random.nextInt(10);
}
//获取原始文件全名
String oriFilename = mf.getOriginalFilename();
//截取后缀名
String suffix= oriFilename.substring(oriFilename.lastIndexOf(“.”));
//要上传文件的绝对路径 用于前台缩略图展示
String realpath = ECPSUtils.readpop(“upload_file_path”)+”/upload”+filename+suffix;
//要上传文件的相对路径 用于保存到数据库
String relativePath =”/upload”+filename+suffix;
//由于在不同的主机上不能直接通过流的方式上传
Cilent client = Client.create();
//判断图片是不是第一次上传
If(StringUtils.isNotBlank(lastRealPath)){
WebResource wr = Client.resource(lastRealPath);
Wr.delete();
}
//指定要上传的具体地址,参数就是要上传图片的绝对路径
WebResource wr = Client.resource(realpath);
//进行上传 传入图片的字节数组
wr.put(mfs);
//使用JSON对象把绝对路径和相对路径写回去
JSONObject jo = new JSONObject();
Jo.accumulate(“realpath”, realpath);
Jo.accumulate(“relativePath”, relativePath);
//现在获得的是json格式 键值对
String result = Jo.toString();
Out.write(result);
}
}
第七步 JS代码
function submitUpload(){
var option{
url:path+"/upload/uploadPic.do", //上传url地址
dataType:"text", //回调值的数据类型
success:function(responseText){
//里面的值是JSON格式,两个地址:相对路径和绝对路径,要取到绝对路径显示缩略图
var jsonObj = $.parse(responseText);
$("#ImgsImgSrc").attr("src",jsonObj.realpath); //取到绝对路径
//表单中写一个input隐藏域,设置一个Id 为了把相对路径保存到数据库
$("#imgs").val(jsonObj.relativePath);
//再在表单里面加一个隐藏域,用来判断图片是不是第一次上传
$("#lastRealPath").val(jsonObj.realpath);
}
error:function(){
alter('系统错误');
}
}
$("#form111").ajaxSubmit(option); //提交表单
}