最近开发网站的时候需要写一个录入个人信息页面,其中上传图片要提供预览功能,一开始预览是在前端完成的,后来发现在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;" οnchange="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浏览器下会提示错误。