jquery上傳預覽
⑴ 我需要一個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源碼。
⑵ Adobe Dreamweaver軟體功能
Adobe Dreamweaver CS6的增強功能包括改進的FTP性能，可高效傳輸大型文件。新增的「實時視圖」和「多屏幕預覽」面板支持HTML5代碼，便於檢查設計。自適應網格設計使得網頁在不同設備上都能響應。利用集成的Adobe Business Catalyst，輕松構建電子商務網站。更新的jQuery移動支持，簡化移動應用開發流程。PhoneGap集成，方便創建Android和iOS本地應用，並可通過現有HTML代碼改編。CSS3轉換功能為網頁設計增加動態效果。
在CS5.5中，Dreamweaver提供了更全面的HTML5和CSS3支持，以及多屏幕預覽功能，設計師可以直觀地為多種設備進行設計。CSS3/HTML5面板更新，支持新規則，設計視圖支持媒體查詢。實時視圖集成jQuery，提供高級交互性。PhoneGap功能擴展，構建本地應用更便捷。
CS4的新增功能包括實時視圖，允許在瀏覽器環境中實時設計，同時便於代碼編輯。代碼提示支持Ajax和javaScript框架，提升編碼效率。相關文件功能管理網頁文件，代碼導航器幫助定位影響內容的代碼。Adobe AIR創作支持，直接在Dreamweaver創建和預覽應用程序。FLV支持增強，無需專業知識即可集成。此外，還支持HTML、CSS、JavaScript等多種技術，學習資源豐富，社區交流活躍。
(2)jquery上傳預覽擴展閱讀
是個原本由Macromedia公司所開發的著名網站開發工具。它使用所見即所得的介面，亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。隨Macromedia被Adobe收購後，Adobe也開始計劃開發Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎 "Presto" 作為網頁預覽。
⑶ jQuery File Upload 圖片預覽代碼如何寫
jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以裡面沒做預覽的支持。但是可以直接用jquery簡單實現出來，代碼如下：
/*
先在js里擴展一個uploadPreview方法
使用方法:
<div>
<imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
把需要進行預覽的IMG標簽外套一個DIV然後給上傳控制項ID給予uploadPreview事件
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});
*/
jQuery.fn.extend({
uploadPreview:function(opts){
var_self=this,
_this=$(this);
opts=jQuery.extend({
Img:"ImgPr",
Width:100,
Height:100,
ImgType:["gif","jpeg","jpg","bmp","png"],
Callback:function(){}
},opts||{});
_self.getObjectURL=function(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};
_this.change(function(){
if(this.value){
if(!RegExp(".("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){
alert("選擇文件錯誤,圖片類型必須是"+opts.ImgType.join("，")+"中的一種");
this.value="";
returnfalse
}
if($.browser.msie){
try{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}catch(e){
varsrc="";
varobj=$("#"+opts.Img);
vardiv=obj.parent("div")[0];
_self.select();
if(top!=self){
window.parent.document.body.focus()
}else{
_self.blur()
}
src=document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':opts.Width+'px',
'height':opts.Height+'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src
}
}else{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然後是HTML頁面進行調用：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<title>圖片上傳預覽演示</title>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="16/uploadPreview.js"type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});
});
</script>
</head>
<body>
<divstyle="width:500px;margin:0pxauto;"><h2>圖片上傳預覽演示</h2>
<div><imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
</div>
</body>
</html>
⑷ 在本地電腦選擇好圖片，在上傳之前，就立馬可以預覽到選擇到的圖片
1、swf的jquery插件可以很好的實現，而且比較成熟、比較常用。
2、可以用iframe+css+Ajax實現。