<span style="font-size:14px;color:#000000;background-color: rgb(204, 204, 204);"><script type="text/javascript">
//采用jquery.form.js异步上传图片,并结合<form>表单
function uploadFic(){
$("#jvForm").ajaxSubmit({
url : "${pageContext.request.contextPath}/upload/uploadPic.do",
dataType : "json",
type : "post",
success : function(data){
//处理结果
//将相对路径设置给隐藏域中,提交时用
$("#imgUrl").val(data.path);
//将全路径设置给img标签,显示图片用
$("#allImgUrl").attr("src",data.url);
}
});
}
</script></span><strong></strong>
<span style="font-size:14px;"><div class="body-box" style="float:right">
<form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="1" cellpadding="2" width="100%" border="0" class="pn-ftable">
<tbody>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h">
<span class="pn-frequired">*</span>
品牌名称:</td><td width="80%" class="pn-fcontent">
<input type="text" class="required" name="name" maxlength="100"/>
</td>
</tr>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h">
<span class="pn-frequired">*</span>
上传商品图片(90x150尺寸):</td>
<td width="80%" class="pn-fcontent">
注:该尺寸图片必须为90x150。
</td>
</tr>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h"></td>
<td width="80%" class="pn-fcontent">
<img src="" id="allImgUrl"/>
<input type="hidden" name="imgUrl" id="imgUrl"/>
<input type="file" name="uploadPic" οnchange="uploadPic()"/>
</td>
</tr>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h">
品牌描述:</td><td width="80%" class="pn-fcontent">
<input type="text" class="required" name="name" maxlength="80" size="60"/>
</td>
</tr>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h">
排序:</td><td width="80%" class="pn-fcontent">
<input type="text" class="required" name="name" maxlength="80"/>
</td>
</tr>
<tr>
<td width="20%" class="pn-flabel pn-flabel-h">
是否可用:</td><td width="80%" class="pn-fcontent">
<input type="radio" name="isDisplay" value="1" checked="checked"/>可用
<input type="radio" name="isDisplay" value="0"/>不可用
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="pn-fbutton" colspan="2">
<input type="submit" class="submit" value="提交"/> <input type="reset" class="reset" value="重置"/>
</td>
</tr>
</tbody>
</table>
</form>
</div></span>
<span style="font-size:14px;">@Controller
public class UploadController {
@RequestMapping(value = "/upload/uploadPic.do")
public void uploadBrandPic(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response,HttpServletRequest request){
//图片名称生成策略---采用时间格式(精确到毫秒)并追加随机3位(10以内)数字
//精确到毫秒
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String picName = df.format(new Date());
//随机再生成3位 10以内的数
Random r = new Random();
for(int i=0;i<3;i++){
picName += r.nextInt(10);
}
//获取扩展名
String originalFilename = file.getOriginalFilename();
String ext = FilenameUtils.getExtension(originalFilename);
//图片上传的路径
String path = "upload/" + picName + "." + ext;
//上传图片到指定位置记得先创建upload文件夹或是程序创建文件夹
try {
file.transferTo(new File(request.getSession().getServletContext().getRealPath("/") + path));
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}</span>
注意:需引入<script src="${pageContext.request.contextPath }/res/common/js/jquery.form.js" type="text/javascript"></script>文件