学步园

最近开发网站的时候需要写一个录入个人信息页面，其中上传图片要提供预览功能，一开始预览是在前端完成的，后来发现在IE9版本下无法预览（只在CHROME和IE10下有效果），在网上找了一些方法，发现没有效果，代码如下：

if (checkFileType(imgFile)) {
				if (isLowerThanIE8()) {
					/*  	var newPreview = document.getElementById("img_input");
						newPreview.filters
									.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;  */
					//document.getElementById("img_input").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src=\""
					//	+ imgFile.value + "\")"; 
					file.select();
					file.blur();
					var reallocalpath = document.selection.createRange().text;
					document.getElementById("img_input").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\""
							+ reallocalpath + "\")";
					document.getElementById("img_input").src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
				
				} else {
					var objUrl = getObjectURL(imgFile.files[0]);
					console.log("objUrl = " + objUrl);
					if (objUrl != 1) {
						$("#img_input").attr("src", objUrl);
					}
				}
			}

代码中所展示两种方法 在静态页面下均有效果，但是部署后发现 第一种方法（已被注释）filter没有效果，而第二种方法执行到“var reallocalpath = document.selection.createRange().text;”的时候 在IE浏览器下访问被拒绝

所以放弃了这个思路，打算用户在选择好图片文件的时候直接上传到服务器，然后显示出来，之前没有接触过图片ajax提交，都是使用form提交的，为此研究了一下ajaxFileUpload ，直接上代码：

HTML代码：

<img src="/images/defaultImg.jpg" id="img_edit"
				style="width: 100px; height: 125px; padding-top: 25px"> <br>
			<input type="file" name="file_edit" id="file_edit"
				style="width: 100px;" onchange="previewImg(2)" multiple="multiple" />

JS代码：

function previewImg(status) {
			var file = null, fileId = "";
			if (status == 1) {
				file = document.getElementById("file_input");
				fileId = "file_input";
			} else if (status == 2) {
				file = document.getElementById("file_edit");
				fileId = "file_edit";
			}
			if (checkFileType(file)) {
				$.ajaxFileUpload({
					fileElementId : fileId,
					url : "imgUpdate2.json",
					contentType : "text/html",//application/xml  
					processData : true,
					data : {
						status : status,
					},
					dataType : "json",
					success : function(data, textStatus) {
						/*  alert(data); */
						if (status == 1) {
							$("#img_input").attr("src", data);
						} else if (status == 2) {
							$("#img_edit").attr("src", data);
						}
					},
					error : function(jqXHR, textStatus, errorThrown) {
					},
				});
			}
		}

后台代码：

@RequestMapping(value = "imgUpdate2.json")
	public void imgUpdateJson2(HttpServletRequest request,
			HttpServletResponse response,
			@RequestParam(value = "status", required = false) Integer status)
			throws IOException {
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		// 获得第1张图片（根据前台的name名称得到上传的文件）
		MultipartFile imgFile1 = null;
		if (status == 1) {
			imgFile1 = multipartRequest.getFile("file_input");
		} else if (status == 2) {
			imgFile1 = multipartRequest.getFile("file_edit");
		}
		String imgSrc = "";
		String extName = "";
		// 获得文件原始文件名
		String fileName = imgFile1.getOriginalFilename();
		if (fileName != null && fileName != "") {
			// 获得文件名后缀并小写处理
			extName = fileName.substring(fileName.lastIndexOf("."),
					fileName.length());
			extName = extName.toLowerCase();
		}
		// 当前时间
		String nowTimeStr = new SimpleDateFormat("yyyyMMddHHmmss")
				.format(new Date());
		// 读取上传配置文件路径
		InputStream inputStream = this.getClass().getClassLoader()
				.getResourceAsStream("uploadFile.property");
		Properties p = new Properties();
		try {
			p.load(inputStream);
		} catch (IOException e1) {
			e1.printStackTrace();
		}
		// 获取图片上传的虚拟路径文件夹
		String localPath = p.getProperty("localPath");
		// 图片文件名为当前时间加后缀
		imgSrc = nowTimeStr + extName;
		// 文件上传路径为文件夹+文件名
		String upFilePath = localPath + imgSrc;
		System.out.println("upFilePath:" + upFilePath);
		// 检查文件后缀是否合法
		File file = this.creatFolder(localPath, imgSrc);
		try {
			imgFile1.transferTo(file);
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		String uploadPath = p.getProperty("uploadPath");
		uploadPath = uploadPath + imgSrc;
		System.out.println("uploadPath:" + uploadPath);
		// 存入数据库为相对路径
		response.setContentType("text/html");
		response.getWriter().print(uploadPath);
	}

要注意的一点就是后台返回数据只能自己手动构建字符串，设置ContentType为“text/html“通过respone输出，不然在IE浏览器下会提示错误。