圖片上傳之前的預覽
這幾天公司看到公司的檔案上傳使用的是上傳成功之後從伺服器上取路徑的方式作為預覽的，本人感覺這種方式不是很合理，於是自己嘗試了一下，將預覽的功能記錄下來，作為紀念。
說明，該功能是通過網上一哥們上傳的一個上傳預覽的檔案修改而來的，因此要感謝他的無私奉獻。這是他的原版地址
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" onchange="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上沒有發現問題。