ajax異步跨服上傳圖片

環境配置

1.導入jar包

commos-io

commos-fileupload

jersey框架包

2.配置文件上傳解析器

springmvc.xml

<!-- 配置文件上傳解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
	<!-- 設置文件上傳最大容量5m -->
	<property name="maxUploadSize">
		<value>5242880</value>
	</property>
</bean>

注意：id必定要配置，底層經過id找解析器

3.建立新項目做爲圖片存儲服務器

1.建立新tomcat服務器

2.修改端口

4.修改服務器寫入權限

Serverts/Tomcat/web.xml

添加readonly：false

<servlet>
    <servlet-name>default</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
        <param-name>readonly</param-name>
        <param-value>false</param-value>
    </init-param>
</servlet>

頁面編寫

1.表單

<p><label></label>
	<img id='imgSize1ImgSrc' src='${picPath }${item.pic }'  height="100" width="100" />
	<input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">請上傳圖片的大小不超過3MB</span>
    <input type='hidden' id='imgSize1' name='pic' value='${item.pic}' reg="^.+$" tip="親！您忘記上傳圖片了。" />
</p>

2.定義ajax異步函數

2.1導入並引入js

jquery.js

jquery.form.js

注意導入順序，先導入jQuery再導入jQuery.form

2.2使用ajax上傳圖片

function submitImgSize1Upload(){
//上傳圖片流程：把圖片流對象，放入request
//圖片對象在表單中，提交表單
//ajax提交表單：$.post()
var option = {
		type:'post',
		url:'${pageContext.request.contextPath }/uploadPic.do',
		dataType:'text',
		data:{
			fileName:'imgSize1File'
		},
		success:function(data){
			//把json格式字符串轉換成對象
			var obj = $.parseJSON(data);
			//圖片回顯，把圖片地址設置img標籤便可，圖片裏面回顯
			$("#imgSize1ImgSrc").attr("src",obj.fullPath);
			//給input隱藏域標籤設置一個圖片服務器地址，提交保存數據庫
			$("#imgSize1").val(obj.fullPath);
		}
	};
	//提交表單
	$("#itemForm").ajaxSubmit(option);

}

上傳控制類

1.獲取名稱及擴展名

2.定義隨機文件名

3.使用jesery客戶端上傳圖片

4.圖片回顯

@RequestMapping("/upload/uploadPic")
public void upload(HttpServletRequest request,String fileName,PrintWriter out){
	System.out.println("1");
	//把request轉換成多部件請求對象
	MultipartHttpServletRequest mh = (MultipartHttpServletRequest)request;
	//根據文件name屬性名稱獲取文件對象
	CommonsMultipartFile file = (CommonsMultipartFile) mh.getFile(fileName);
	//獲取名稱
	String originalFilename = file.getOriginalFilename();
	//截取獲取文件擴展名
	String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
	
	//使用毫秒+隨機數定義文件名
	long currentTimeMillis = System.currentTimeMillis();
	//定義保存的文件名
	String fn = currentTimeMillis+"";
	//添加隨機數
	Random random = new Random();
	for(int i =0 ;i < 4; i++){
		fn += random.nextInt(10);
	}
	//添加擴展名
	fn += extName;
	
	//上傳文件
	//跨服務器上傳文件，使用jesery客戶端
	Client client = Client.create();
	//指定遠程服務器絕對路徑
	WebResource resource = client.resource(Constants.IMAGE_HOST+"upload/"+fn);
	//上傳文件
	resource.put(String.class,file.getBytes());
	
	//圖片回顯
	//把遠程圖片服務圖片地址返回給頁面ajax解析
	//得到圖片地址
	String fullPath = Constants.IMAGE_HOST+"upload/"+fn;
	//將地址封裝到json中去
	String jsonResult = "{\"fullPath\":\""+fullPath+"\"}";
	//將jsonResult打印出去
	out.println(jsonResult);
}

問題

描述：圖片上傳時 403返回異常

緣由：tomcat默認禁止上傳，readonly沒有配置

解決：配置readonly爲false