这几天公司看到公司的文件上传使用的是上传成功之后从服务器上取路径的方式作为预览的，本人感觉这种方式不是很合理，于是自己尝试了一下，将预览的功能记录下来，作为纪念。
说明，该功能是通过网上一哥们上传的一个上传预览的文件修改而来的，因此要感谢他的无私奉献。这是他的原版地址
http://sundoctor.iteye.com/blog/1943278
功能说明：通过file表单实现文件上传，如果通过浏览器直接获取本地的图片路径作为会有问题，浏览器禁止加载本地硬盘的路径，于是问题就在于如何解决浏览器读取本地文件的问题，通过阅读上面的帖子，确实看到了，解决这个问题的办法，我所做的只是去掉了其中多余的校验，将路径的转换功能保留下来了。
jsp代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="myprivew.js"></script>
<script type="text/javascript">
function showpic(obj)
{
$("#imgs").attr("src",getPreviewPath(obj));
}
</script>
</head>
<body>
<form action="fileUpload.action" method="post" enctype="multipart/form-data">
file1: <input type="file" name="file" οnchange="showpic(this);">
<img alt="" src="" id="imgs"/><br>
<input type="submit" value="submit">
</form>
</body>
</html>
唯一需要说明的是为file表单添加的change事件，主要是为了拿到本地硬盘的文件数据源头。
js代码代码如下（myprivew.js中getPreviewPath方法具体实现）
function getPreviewPath(obj)
{
var file = null;
var size = 0;
var path="";
try{
if(obj.files && obj.files[0] ){
file = obj.files[0];
//size = file.size; //文件大小，此处可以用它校验上传图片的大小限制
}else if(obj.files && obj.files.item(0)) {
file = obj.files.item(0);
// size = file.fileSize;
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{
//Firefox7.0 以下
path = file.getAsDataURL();
}catch(e){
//Firefox8.0以上
path = window.URL.createObjectURL(file);
}
}catch(e){
//支持html5的浏览器,比如高版本的firefox、chrome、ie10
if (obj.files && obj.files[0]) {
// if((obj.files[0].size/1024) > opts.maxSize){
// alert('图片大小不能超过'+opts.maxSize+'K');
// return "";
// }
var reader = new FileReader();
reader.onload = function (e) {
path = e.target.result;
};
reader.readAsDataURL(obj.files[0]);
}
}
return path;
}
经过调试，在360上没有发现问题。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
