下載地址http://download.csdn.net/detail/cometwo/9383602
兄弟文章：http://blog.csdn.net/libin_1/article/details/50916704
input file上傳圖片預覽其實很簡單，只是沒做過的感覺很神奇，今天我就扒下她神祕的面紗，其實原理真的非常非常非常非常非常非常簡單！
點選紅框是載入顯示圖片，X號刪除，藍框是自動在後面新增新增圖片框，所有的都是原創，程式碼其實可以更加精簡，看終結版檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.imgbox,.imgbox1
{
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
width: 182px;
height: 142px;
border: 1px solid red;
overflow: hidden;
}
.imgbox1{border: 1px solid blue;
}
.imgnum{
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
}
.imgnum input,.imgnum1 input {
position: absolute;
width: 182px;
height: 142px;
opacity: 0;
}
.imgnum img,.imgnum1 img {
width: 100%;
height: 100%;
}
.close,
.close1 {
color: red;
position: absolute;
left: 170px;
top: 0px;
display: none;
}
</style>
</head>
<body>
<div id="img">
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div><div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div> <div class="imgbox">
<div class="imgnum">
<input type="file" class="filepath" />
<span class="close">X</span>
<img src="btn.png" class="img1" />
<img src="" class="img2" />
</div>
</div>
<div class="imgbox1">
<div class="imgnum">
<input type="file" class="filepath1" />
<span class="close1">X</span>
<img src="btn.png" class="img11" />
<img src="" class="img22" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$(".filepath").on("change",function() {
alert($('.imgbox').length);
var srcs = getObjectURL(this.files[0]); //獲取路徑
$(this).nextAll(".img1").hide(); //this指的是input
$(this).nextAll(".img2").show(); //fireBUg檢視第二次換圖片不起做用
$(this).nextAll('.close').show(); //this指的是input
$(this).nextAll(".img2").attr("src",srcs); //this指的是input
$(this).val(''); //必須制空
$(".close").on("click",function() {
$(this).hide(); //this指的是span
$(this).nextAll(".img2").hide();
$(this).nextAll(".img1").show();
})
})
})
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
$(function() {
$("#img").on("change",".filepath1",function() {
//alert($('.imgbox1').length);
var srcs = getObjectURL(this.files[0]); //獲取路徑
alert(srcs);
//this指的是input
/* $(this).nextAll(".img22").attr("src",srcs); //this指的是input
$(this).nextAll(".img22").show(); //fireBUg檢視第二次換圖片不起做用*/
var htmlImg='<div class="imgbox1">'+
'<div class="imgnum1">'+
'<input type="file" class="filepath1" />'+
'<span class="close1">X</span>'+
'<img src="btn.png" class="img11" />'+
'<img src="'+srcs+'" class="img22" />'+
'</div>'+
'</div>';
$(this).parent().parent().before(htmlImg);
$(this).val(''); //必須制空
$(this).parent().parent().prev().find(".img11").hide(); //this指的是input
$(this).parent().parent().prev().find('.close1').show();
$(".close1").on("click",function() {
$(this).hide(); //this指的是span
$(this).nextAll(".img22").hide();
$(this).nextAll(".img11").show();
if($('.imgbox1').length>1){
$(this).parent().parent().remove();
}
})
})
})
</script>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217複製程式碼問題
加入我們在 HTML 裡面有一個圖片上傳控制元件：
注意這個 accept=”image/*” 非常重要，它指定了上傳的是圖片，在移動端的時候會關聯到系統的彈窗選擇型別等問題，務必加上。
然後，問題是，我們在沒有提交這個表單到伺服器之前，有沒有辦法把圖片的內容讀取出來呢？
看似簡單，都是客戶端的檔案，應該是可以的，但在之前確實沒什麼好辦法，但是自從我們有了 HTML5
例子說明問題
複製程式碼
$(function() {
$('#upload_image').change(function(event) {
// 根據這個 <input> 獲取檔案的 HTML5 js 物件
var files = event.target.files, file;
if (files && files.length > 0) {
// 獲取目前上傳的檔案
file = files[0];
// 來在控制檯看看到底這個物件是什麼
console.log(file);
// 那麼我們可以做一下諸如檔案大小校驗的動作
if(file.size > 1024 * 1024 * 2) {
alert('圖片大小不能超過 2MB!');
return false;
}
// !!!!!!
// 下面是關鍵的關鍵，通過這個 file 物件生成一個可用的影象 URL
// 獲取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通過 file 生成目標 url
var imgURL = URL.createObjectURL(file);
// 用這個 URL 產生一個 <img> 將其顯示出來
$('body').append($('<img/>').attr('src', imgURL));
// 使用下面這句可以在記憶體中釋放對此 url 的伺服，跑了之後那個 URL 就無效了
// URL.revokeObjectURL(imgURL);
}
});
});123456789101112131415161718192021222324252627複製程式碼複製程式碼
簡要說明
簡單來說整個操作設計如下幾步：
通過 的 change 事件觸發事件，並且獲取 event 物件；
通過 event 物件獲取上傳的檔案的 js 物件 file ；
通過 window.URL 工具從 file 物件生成一個可用的 URL；
把這個 URL 置入使用；
*釋放這個 URL 的伺服
關鍵點：
對於同一個 file ，每次呼叫 URL.createObjectURL 的時候，都會重新生成一個不同的 URL；
呼叫 URL.createObjectURL 的時候，瀏覽器自動在記憶體中開闢空間，用於伺服這個 URL，也就是使得這個 URL 可以請求成功；
如果呼叫了 URL.revokeObjectURL(imgURL); 之後，這個伺服就會關掉，再請求這個 URL 就會 404；
這一切都是客戶端的事情，伺服器端對此一無所知，包括你選擇的這個圖；
這個 imgURL 大概是這個樣子：blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb