多圖片上傳預覽
❶ php批量上傳圖片，是先上傳再預覽，還是先預覽在上傳好呢
你可以先上傳一張縮略圖到伺服器，返回給用戶看，等這張圖片完整圖上傳，再刪掉原來的
❷ 怎麼實現上傳多張圖片預覽
這種方式不廣泛，在IE可能能看到效果，但是在谷歌瀏覽器上不能看到效果！
❸ 怎樣一次上傳多張圖片
一般再上傳的時候都是可以選擇單張上傳和多圖上傳的。
1.可以將要上傳的照片文件先整理復制到同一個文件夾里，上傳時全選該文件夾里的所有文件即可。
2.可在文件夾中按大預覽圖的方式顯示文件，然後按住「ctrl」或者「shift」鍵，選擇所有要上傳的圖片文件再點確認一次性加入。
❹ 怎麼實現圖片上傳前預覽功能呢
預覽圖片
預覽功能的基本設計思路：創建一個img元素，再把文件域的value值賦值給img元素的src屬性。
<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4" ōnchange="preview4()" />
<img id="pic4" src="" alt="圖片在此顯示" width="120"/>
</form>
<scrīpt type="text/javascrīpt">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
</scrīpt>
試下效果：
如果你用的是Firefox（或Opera），可能會發現什麼也沒有發生。是的，很不幸Firefox的安全策略不允許我們顯示一個用戶的本地圖像文件。不知道他們為什麼要這么做，我個人覺得圖像文件並不會造成嚴重的安全性問題。即使是不久前比較熱門的那個會引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個文件或者你知道這個文件在用戶硬碟上的准確路徑。所以我想這種策略很可能來自於一個「懶惰」的開發人員，他並不想多寫一些程序來區分這個本地文件是一個圖像文件還是一個惡意文件，Firefox對安全性的要求讓他們有些過於敏感了。
讓Firefox顯示本地文件的唯一辦法就是修改它的默認安全策略：
在Firefox的地址欄中輸入「about:config」
繼續輸入「security.checkloari」
雙擊下面列出來的一行文字，把它的值由true改為false
然後你可以再試試上面預覽，everything works well！可惜的是我們並不能要求所有的用戶都去修改這個值（更不用說修改的過程還挺麻煩），所以這對我們來說毫無意義。我們能做的也許就是接受Firefox不能預覽本地圖片這種「可笑」的局面。
用DOM來創建對象
在上面的XHTML代碼中，我們為了預覽圖片，事先加入了一個沒有設置src的img對象。除去不美觀、代碼冗餘之外，如果用戶瀏覽器不支持Javascrīpt，他不僅無法使用這個功能，還要接受頁面上一個永遠不會顯示出來的破圖。要解決這個問題，我們就需要在「運行時」再生成這個img對象，途徑還是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" ōnchange="preview5()"/>
</form>
<scrīpt type="text/javascrīpt">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){ y.src = 'file://localhost/' + x.value; }
else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
</scrīpt>
❺ 微信公眾平台怎麼預覽多圖文
打開微信公眾平台並登錄。
點擊進入素材管理界面。
在 素材管理界面，滑鼠移到 + 時，會出現單圖文消息和多圖文消息。
點擊多圖文消息， 填寫標題、封面圖片、正文內容，作者、摘要等，並在正文內容點擊插入圖片按鈕，然後從電腦選擇圖片上傳。
編輯好文章點擊預覽，在彈出窗口輸入已關注公眾號的微信號、手機號等，即可將圖文信息發送給該用戶進行預覽。
❻ html+js，求個多圖片上傳預覽的代碼
這個問題已經困擾我好多年了，html+js不能實現，網上大多是ajax或者flash
❼ php 如何實現圖片上傳前預覽，並且有多個圖片上傳和預覽
<form name="form4" id="form4" method="post" action="#"> <input type="file" name="file4" id="file4" ōnchange="preview4()" /> <img id="pic4" src="" alt="圖片在此顯示" width="120"/> </form> <scrīpt type="text/javascrīpt"> function preview4(){ var x = document.getElementById("file4"); var y = document.getElementById("pic4"); if(!x || !x.value || !y) return; var patn = /\.jpg$|\.jpeg$|\.gif$/i; if(patn.test(x.value)){ y.src = "file://localhost/" + x.value; } else{ alert("您選擇的似乎不是圖像文件。"); } } </scrīpt>
❽ 手機微信如何同時上傳多張照片
在微信上上傳多張圖片方法：
首先登陸微信在主頁面點擊朋友圈進入。
進入到朋友圈後，點擊右上角的照相機標志開始分享圖片。
點擊拍照鍵可以發送即時的分享，這是最快速的方法，適合第一首資源的分享，比如某場現實活動，現場的抓拍，分享是最快的一個。
也可以上傳留在手機中的拍好的照片，最多可勾選9張。
還可以是其他圖片，查看所有圖片例如截圖、下載的美圖等也可以批量上傳。
點擊預覽可以對上傳的照片進行最後的預覽。
最後就是配上適當的文字，然後點擊發送，這樣所分享的圖片就會進入好友的朋友圈當中了。
❾ php圖片上傳前預覽怎麼實現！！
1.先創建一個file表單域，我們需要用它來瀏覽本地文件。
<form name="form1" id="form1" method="post" action="upload.php">
<input type="file" name="file1" id="file1" />
</form>
2.試下效果：
判斷文件類型：
當用戶選擇了一個圖片文件時，希望他能馬上看到這張圖片的縮略圖，以便他能確認沒有把自己的光屁股照片當作頭像傳到伺服器上^_^。
在預覽之前還得先判斷一下用戶選擇的是不是一個圖像文件，如果他想用一個.rar文件做頭像的話我們也需要禮貌地提醒一下。
<form name="form2" id="form2" method="post" action="upload.php">
<input type="file" name="file2" id="file2"
onchange="preview()" />
</form>
Javascript函數實現，注意使用DOM方法getElementById來訪問對象。不要再使用form
和input的name屬性來訪問對象了，只有IE才這么干。<script type="text/javascript">
function preview2(){
var x = document.getElementById("file2");
if(!x || !x.value) return;
if(x.value.indexOf(".jpg")<0
&& x.value.indexOf(".jpeg")<0
&& x.value.indexOf(".gif")<0){
alert("您選擇的似乎不是圖像文件。");
}else{
alert("通過");
}
}
</script>
3.試下效果：
這里有一個問題，如果用戶選擇了名為「fake.jpg.txt」的文件，這段腳本仍舊會認為這是一個合法的圖像文件。一個可行的解決方案是先 把文件名轉換成小寫，再取文件路徑的最後4到5位，判斷一下文件的擴展名是否確為支持的圖像文件擴展名。不過這種方案略顯笨拙，也沒有什麼美感可言， 我們換一種方案：用「正則表達式」來判斷文件擴展名。
<script type="text/javascript">
function preview3(){
var x = document.getElementById("file3");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
alert("通過");
}else{
alert("您選擇的似乎不是圖像文件。");
}
}
</script>
4.看看效果（可以自己創建一個「fake.jpg.txt」文件試試）：
回到這段腳本上來，即使你還看不懂正則表達式那兩行，但整段腳本的美感還是很明顯的：簡潔、直接、語義流暢，這與Web標准關於XHTML的要求是一致的，與Web設計師或開發者天生的「完美」主義也是一致的。
jjww一大段之後，轉入重點——預覽圖片
預覽功能的基本設計思路是很清晰的：創建一個img元素，再把文件域的value值賦值給img
元素的src屬性。<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4"
onchange="preview4()" />
<img id="pic4" src="http://blog.163.com/lgh_2002/blog/" alt="圖片在此顯示" width="120"/>
</form>
<script type="text/javascript">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}else{
alert("您選擇的似乎不是圖像文件。");
}
}
</script>
5.試下效果：
如果用的是Firefox（或Opera），可能會發現什麼也沒有發生。是的，很不幸Firefox的安全策略不允許顯示一個用戶的本地 圖像文件。不知道為什麼要這么做，個人覺得圖像文件並不會造成嚴重的安全性問題。即使是不久前比較熱門的那個會引起Windows崩潰的jpeg文 件，要顯示它的前提條件是用戶自己選擇了這個文件或者你知道這個文件在用戶硬碟上的准確路徑。所以我想這種策略很可能來自於一個「懶惰」的開發人員，並 不想多寫一些程序來區分這個本地文件是一個圖像文件還是一個惡意文件，Firefox對安全性的要求讓他們有些過於敏感了。
讓Firefox顯示本地文件的唯一辦法就是修改它的默認安全策略：
在Firefox的地址欄中輸入「about:config」
繼續輸入「security.checkloari」
雙擊下面列出來的一行文字，把它的值由true改為false
然後你可以再試試上面預覽，everything works well！可惜的是並不能要求所有的用戶都去修改這個值（更不用說修改的過程還挺麻煩），所以毫無意義。我們能做的也許就是接受Firefox不能預覽本地圖片這種「可笑」的局面。
用DOM來創建對象
在上面的XHTML代碼中，為了預覽圖片，事先加入了一個沒有設置src的img對象。除去不美觀、代碼冗餘之外，如果用戶瀏覽器不支持 Javascript，不僅無法使用這個功能，還要接受頁面上一個永遠不會顯示出來的破圖。要解決這個問題，就需要在「運行時」再生成這個img對 象，途徑還是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5"
onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = 'file://localhost/' + x.value;
}else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}else{
alert("您選擇的似乎不是圖像文件。");
}
}
</script>
6.試下效果：
這樣就相對比較完美了。DOM和正則表達式一樣，都是「包你不悔」的實 用技術，如果你希望更多了解、深入學習、或者順利實踐Web標准，DOM是不可或缺的。從本人最近的體會來說，Javascript+DOM+CSS蘊 藏著強大的能量，就看怎麼釋放它了。
7.最後帖上JQUERY的上傳預覽代碼：
de><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="http://blog.163.com/lgh_2002/blog/' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>de>
❿ jquery 多圖片預覽
給你重新寫了一個，直接拷貝到記事本另存為html就可以調試(Jquery是在線引用的)。
以下代碼在IE8和FF下測試通過。
另：程序如果有什麼問題可以HI我。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//全局變數
var FileCount=0;//上傳文件總數
//添加上傳文件按鈕
function addFile(obj)
{
var filePath=$(obj).prev().val();
var FireFoxFileName="";
//FireFox文件的路徑需要特殊處理
if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
FireFoxFileName=filePath;
filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
}
if(!checkFile(filePath,FireFoxFileName))
{
$(obj).prev().val("");
return;
}
if(filePath.length==0)
{
alert("請選擇上傳文件");
return false;
}
FileCount++;
//添加上傳按鈕
var html='<span>';
html+='<input id="f'+FileCount+'" name="'+FileCount+'" type="file"/>';
html+='<input type="button" value="添加" onclick="addFile(this)"/>';
html+='</span>';
$("#fil").append(html);
//添加圖片預覽
html='<li>';
html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暫無預覽" />';
html+='<br/>';
html+='<a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)">刪除</a>';
html+='</li>';
$("#ImgList").append(html);
}
//刪除上傳文件（file以及img）
function DelImg(obj)
{
var ID=$(obj).attr("name");
ID=ID.substr(3,ID.length-3);
$("#f"+ID).parent().remove();
$(obj).parent().remove();
return false;
}
//檢查上傳文件是否重復,以及擴展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
var flag=true;
$("#ImgList").find(":img").each(function(){
if(fileName==$(this).attr("src"))
{
flag=false;
if(FireFoxFileName!='')
{
alert('上傳文件中已經存在\''+FireFoxFileName+'\'!');
}
else
{
alert('上傳文件中已經存在\''+fileName+'\'!');
}
return;
}
});
//文件類型判斷
var str="jpg|jpeg|bmp|gif";
var fileExtName=fileName.substring(fileName.indexOf(".")+1);//獲取上傳文件擴展名
if(FireFoxFileName!='')//fireFox單獨處理
{
fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
}
//alert(fileExtName);
if(str.indexOf(fileExtName.toLowerCase())==-1)
{
alert("只允許上傳格式為jpg，jpeg，bmp，gif的文件。");
flag=false;
}
return flag;
}
</script>
<style type="text/css">
.fil
{
width:300px;
}
.fieldset_img
{
border:1px solid blue;
width:550px;
height:180px;
text-align:left;
}
.fieldset_img img
{
border:1px solid #ccc;
padding:2px;
margin-left:5px;
}
#ImgList li
{
text-align:center;
list-style:none;
display:block;
float:left;
margin-left:5px;
}
</style>
</head>
<body>
<p>上傳預覽圖片:<br>
<div id="fil" class="fil">
<span>
<input id="f0" name="f0" type="file"/>
<input type="button" value="添加" onclick="addFile(this)"/>
</span>
</div>
</p>
<div id="ok">
<fieldset class="fieldset_img">
<legend>圖片展示</legend>
<ul id="ImgList">
<!--li>
<img id="img1" width="100" height="100" style="cursor:pointer;">
<br/>
<a href="#" name="img1" onclick="DelImg(this)">刪除</a>
</li-->
</ul>
</fieldset>
</div>
</body>
</html>