ajaxfileload.js实现图片上传功能

对于一个菜鸟表示很忧伤，首先要实现图片上传功能你的input<input type="file">这样第一个条件，第二你得有name不然上传后服务器获取不到图片。代码如下：

<div class="eUpload fl" id="opor_cardFileDiv">
								选取文件
								<input id="cardUploadFile" name="cardUploadFile" class="file" type="file" onchange="uploadfile(this,'cardUploadFile','opor_cardFile')" onclick="return isUploading(this,'opor_cardFile');">
								<input type="text" id="opor_cardFile" name="opor_cardFile" style="display:none;"/>
							</div>
							<span class="pl10 cred" id="opor_cardFileMsg">未选择文件</span>

点击事件后浏览器弹窗，执行那个方法。代码如下：

function isUploading(obj,hideName) {
	alert("obj1的值是       "+obj.value);
	alert("hideName的值是       "+hideName);
	$('[name="'+ hideName +'"]').val('');
	if("上传中" == $("#" + hideName + "Msg").html()) {
		return false;
	} else {
		return true;
	}
}

选择好文件之后return true,如果是正在上传就return false 然后执行onchange()事件里的方法利用ajaxfileload转到Controller方法里：

function uploadfile(obj, name, hideName){
	var path = obj.value;
	alert("path的值是"+path);
	alert("name2的值是       "+name);
	alert("hideName的值是        "+hideName);
	$("#" + hideName + "Div").attr("disabled",true);
	
	//校验图片格式
	var extStart=path.lastIndexOf(".");
	var ext=path.substring(extStart,path.length).toUpperCase();
	if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
		CU.showMsg({msg:"图片限于bmp,png,gif,jpeg,jpg格式"});
		$('[name="'+ hideName +'"]').val('');
		$("#" + hideName + "Msg").html("请上传图片");
		$("#" + hideName + "Div").attr("disabled",false);
		return false;
	}
	$("#" + hideName + "Msg").html("上传中");
	  $.ajaxFileUpload({
		url:ContextPath+'/admin/common/rsmanager/certifyImageUpload', 
		secureuri:false,
		fileElementId:name,
		dataType: 'json',
		data:{"name":name},
		success: function (data, status){
			if (null != data && null != data.relativePath) {
				//为file的value赋值
				$('[name="'+ hideName +'"]').val(data.relativePath);
				CU.showMsg({msg:"图片上传成功"});
				$("#" + hideName + "Msg").html("图片已上传");
			} 
			/*else {
				alert("dddd11")
				CU.showMsg({msg:"图片上传失败，请重新上传!"});
				$("#" + hideName + "Msg").html("图片上传失败，请重新上传!");
			}*/
			$("#" + hideName + "Div").attr("disabled",false);
		},
		error: function (data, status, e){
			$('[name="'+ hideName +'"]').val('');
			CU.showMsg({msg:"图片上传失败，请重新上传!"});
			$("#" + hideName + "Msg").html("图片上传失败，请重新上传!");
			$("#" + hideName + "Div").attr("disabled",false);
		}
	  });
}

Controller里的方法如下：

	@RequestMapping(value = "/certifyImageUpload", method = RequestMethod.POST)
	public void certifyImageUpload(String name, MultipartHttpServletRequest request,HttpServletResponse response) throws BizException,Exception {
		Map<String,String> result = new HashMap<String, String>();
		MultipartFile file = request.getFile(name);
		if (null == file) {
			returnJson(response,result);
			return;
		}
		String fileName = file.getOriginalFilename();
		
		String[] fileNames=fileName.split("\\.");
		String agentPicDir=(String)resourceCfg.get("agent.pic.dir.remote");
		
    	if ("BMP".equalsIgnoreCase(fileNames[1]) || "PNG".equalsIgnoreCase(fileNames[1]) || "GIF".equalsIgnoreCase(fileNames[1]) || "JPG".equalsIgnoreCase(fileNames[1]) || "JPEG".equalsIgnoreCase(fileNames[1])) {
//    		int itemPicW=Integer.valueOf(resourceCfg.get("item.pic.width").toString());
//    		int itemPicH=Integer.valueOf(resourceCfg.get("item.pic.height").toString());
    		result = rsManagerUtil.imageUpload(file,agentPicDir,-1,-1);
    	} else if ("PDF".equalsIgnoreCase(fileNames[1]) && "cntrtUploadFile".equals(name)){
    		result = rsManagerUtil.fileUpload(file, agentPicDir);
    	}
    	Thread.sleep(2000); 
		returnJson(response,result);
		 
	}

ajaxfileload.js实现图片上传功能

猜你喜欢