页面在选择图片完成后将图片上传到图片服务器,并在页面显示图片,然后将上传图片的路径加载到隐藏域中,提交表单时将路径保存到数据库。
页面代码:
<script>
function submitUpload(){
var option = {
url:"${path}/upload/uploadPic.do",//如果不指定url那么就使用使用提交表单的url,如果指定就使用当前的url
dataType:"text",
success:function(responseText){
var jsonObj = $.parseJSON(responseText);
$("#imgsImgSrc").attr("src", jsonObj.realPath);
$("#imgs").val(jsonObj.relativePath);
},
error:function(){
alert("系统错误");
}
};
$("#form").ajaxSubmit(option);
}
</script>
<form id="form" name="form" action="${path }/add.do" method="post" enctype="multipart/form-data">
<input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' /><span id="submitImgTip" class="pos">请上传图片宽为120px,高为50px,大小不超过100K。</span>
<input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲!您忘记上传图片了。" /><span></span>
</form>
java代码:
@RequestMapping("/uploadPic.do")
public void uploadPic(HttpServletRequest request, Writer out) throws IOException{
//把request转换成复杂request
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//获得文件,此方法实用性强,可以多文件复用。
Map<String, MultipartFile> map = mr.getFileMap();
Set<String> set = map.keySet();
Iterator<String> it = set.iterator();
String fileInputName = it.next();
MultipartFile mf = map.get(fileInputName);
//获得文件的字节数组
byte [] bs = 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.readProp("file_path")+"/upload/"+fileName+suffix;
//获得相对路径
String relativePath = "/upload/"+fileName+suffix;
//创建jersy的客户端
Client client = Client.create();
//创建web资源对象
WebResource wr = client.resource(realPath);
//上传
wr.put(bs);
JSONObject jo = new JSONObject();
jo.accumulate("realPath", realPath);
jo.accumulate("relativePath", relativePath);
String result = jo.toString();
out.write(result);
}
谢谢!