java非同步上傳圖片

標籤：

第一步：引入需要的js

<script src="/res/common/js/jquery.js" type="text/javascript"></script>
<script src="/res/common/js/jquery.form.js" type="text/javascript"></script><!----用來類比form表單提交資料的組件--->

第二部:編寫html頁面

<form id="jvForm" action="add.do" 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 width="100" height="100" id="allImgUrl"/><!--用於顯示上傳成功後在頁面上回顯圖片-->
<input type="hidden" name="imgUrl" id="path"/><!--需要提交到伺服器的圖片路徑，因為是非同步上傳，所以需要帶上imgurl的隱藏欄位-->
<input type="file" onchange="uploadPic()" name="pic"/><!--上傳檔案控制項-->
</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="description" 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="sort" 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="提交"/> &nbsp; <input type="reset" class="reset" value="重設"/>
</td>
</tr>
</tbody>
</table>
</form>

第三步：編寫js代碼類比form表單上床圖片、檔案

<script type="text/javascript">
//上傳圖片
function uploadPic(){
//定義參數
var options = {
url : "/upload/uploadPic.do",
dataType : "json",
type : "post",
success : function(data){
//回調 二個路徑
//url
//path
$("#allImgUrl").attr("src",data.url);
$("#path").val(data.path);
}
};

//jquery.form使用方式
$("#jvForm").ajaxSubmit(options);

}

</script>

第四步：在springMVC中編寫後台接受上上傳的圖片

/**
* 上傳圖片
* 商品
* 品牌
* @author lx
*
*/
@Controller
public class UploadController {

//上傳圖片
@RequestMapping(value = "/upload/uploadPic.do")
public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){
//副檔名
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());

//圖片名稱建置原則
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
//圖片名稱一部分
String format = df.format(new Date());

//隨機三位元
Random r = new Random();
// n 1000 0-999 99
for(int i=0 ; i<3 ;i++){
format += r.nextInt(10);
}
/*下面是使用jersey把圖片上傳到另外一個tomcat，如果是一般儲存圖片，可以使用javaWEB中一般的方式，因為方法參數pic就是上傳的圖片或檔案

//執行個體化一個Jersey
Client client = new Client();
//儲存資料庫
String path = "upload/" + format + "." + ext;

//另一台伺服器的請求路徑是?
String url = Constants.IMAGE_URL + path;
//佈建要求路徑
WebResource resource = client.resource(url);

//發送開始 POST GET PUT
try {
resource.put(String.class, pic.getBytes());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

//返回二個路徑
JSONObject jo = new JSONObject();
jo.put("url", url);
jo.put("path",path);

ResponseUtils.renderJson(response, jo.toString());
}

}

 

第五步：在spring-mvc.xml中配置上傳檔案的解析器

<!-- 上傳圖片 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大上傳尺寸 B 1M -->
<property name="maxUploadSize" value="1048576"/>
</bean>

 

java非同步上傳圖片