html代码(
图片上传Fform表单里的target属性的值frameFile,是form之后的iframe的name值,
这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,
并且不会产生当前页面跳转!
):
<form id="imageUP_fr" action="${BasePath}qiji_admin/imageUpload" method="post" target='frameFile' enctype="multipart/form-data">
<img width='200' src='' height='150' id='imgShow' alt='image' />
<div class="fbwz_tit">
<span>发布文章图片</span>
<label><input type="file" id="file_upload" name="fileUpload"/></label>
<lable id="uploadLog"></lable>
<a href="javascript:;">删除封面</a>
<a href="javascript:toUpload();">上传</a>
</div>
</form>
<iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
js代码:
function toUpload(){
if($("#file_upload").val() == null || ""==$("#file_upload").val()){
alert("请选择文件");
return;
}
$('#uploadLog').html('开始上传中....');
$("#imageUP_fr").submit();
}
function uploadSuccess(msg) {
if (msg.split('|').length > 1) {
$('#imgShow').attr('src', msg.split('|')[1]);
$('#uploadLog').html(msg.split('|')[0]);
$("#wz_imageSrc").val(msg.split('|')[1]);
} else {
$('#uploadLog').html(msg);
}
}
后台controler代码(这里上传图片是上传到又拍云):
/**
* 图片上传
* @param file
* @param request
* @return
*/
@RequestMapping("/imageUpload")
@ResponseBody
public String imageUpload(@RequestParam("fileUpload") CommonsMultipartFile file,HttpServletRequest request){
String strDate = DateUtil.getStrDateShort()+"/";
String filePath = Constant.DIR_ROOT+strDate+file.getOriginalFilename();
try {
UpYun upyun = new UpYun(Constant.BUCKET_NAME, Constant.OPERATOR_NAME, Constant.OPERATOR_PWD);
upyun.setTimeout(120);
// 设置待上传文件的 Content-MD5 值
// 如果又拍云服务端收到的文件MD5值与用户设置的不一致,将回报 406 NotAcceptable 错误
// upyun.setContentMD5(UpYun.md5(file);
// 设置待上传文件的"访问密钥"
// 注意:
// 仅支持图片空!,设置密钥后,无法根据原文件URL直接访问,需带URL后面加上(缩略图间隔标志符+密钥)进行访问
// 举例:
// 如果缩略图间隔标志符为"!",密钥为"bac",上传文件路径为"/folder/test.jpg",
// 那么该图片的对外访问地址为:http://空间域名 /folder/test.jpg!bac
// upyun.setFileSecret("bac");
// 上传文件,并自动创建父级目录(最多10级)
boolean result = upyun.writeFile(filePath, StreamUtil.toByteArray(file.getInputStream()), true);
if(result){
return "<script>window.parent.uploadSuccess('Upload Success!|"+Constant.UP_URL +strDate + file.getFileItem().getName() + "');</script>";
}
} catch (IOException e) {
e.printStackTrace();
return "<script>window.parent.uploadSuccess('Upload error')";
}
return "<script>window.parent.uploadSuccess('Upload error')";
}
参考:http://www.cnblogs.com/zcttxs/archive/2013/07/09/3180509.html