js圖片上傳並預覽

① js圖片上傳 預覽效果

用js或者jquery就可以解決：
//內容部分：
<input type="file" id="tu">
<div id="img"></div>

//js代碼
<script type="text/javascript">
function tou(){
var f = document.getElementById("tu").files[0];
var src = window.URL.createObjectURL(f);
//src 就是圖片的路徑
$("#img").html(" 頭像預覽:<img width='110' height='100' src='"+src+"' >");
}
</script>

② 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

WebUploader項目，符合你的要求。

//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');

//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}

$percent.css('width',percentage*100+'%');
});
//文件上傳成功，給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});

//文件上傳失敗，顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');

//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}

$error.text('上傳失敗');
});

//完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});

更多細節，請查看js源碼。

③ js 圖片上傳本地預覽

瀏覽器安全性已經大大提高，要實現圖片上傳預覽不是那麼簡單了
不過有很多變通或先進的方法來實現
例如ie7/ie8的濾鏡預覽法，firefox 3的getAsDataURL方法
具體可以參考這個圖片上傳預覽效果