當前位置：首頁 » 編程語言 » html預覽上傳圖片

html預覽上傳圖片

發布時間: 2021-03-27 16:31:37

A. 用html，js怎麼將本地圖片批量上傳，上傳前預覽，並可以選中某張圖片給他加旋轉效果。急求高手相救！

批量上傳？js就用Jquery上傳控制項吧（開源社區裡面有例子）。或者，用ckeditor這個符文本框，很好用的~

B. html 上傳圖片,但是顯示不了

你好，你的圖片路徑並沒有輸入，<img name="showimg" id="showimg" src="" style="display:none;" alt="預覽圖片" /> src是圖片路徑，請輸入專圖片路徑，才能讓圖片正常屬顯示

C. 上傳照片，並且馬上能預覽到縮略圖，這用的是哪個js插件

無需插件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用於圖片上傳預覽功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//圖片異常的捕捉，防止用戶修改後綴來偽造圖片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>

D. html input file 屬性怎麼能夠選擇之後馬上預覽圖片

這個並不是那麼簡單做出來的，一般情況下會加一段iframe代碼，模擬ajax上傳。

E. javascript 上傳圖片預覽效果怎麼寫

代碼很簡單

不懂的話,可以加我QQ:1565804

大家一起討論下

<html>
<head>
<script>
function seeimg(){
if(document.getElementById("imgfile").value!=""){
document.getElementById("imgdisplay").style.display="block";
document.getElementById("imgdisplay").src=document.getElementById("imgfile").value;
}else{
document.getElementById("imgdisplay").style.display="none";
}
}
</script>
</head>
<body>
<input type="file" id="imgfile" onchange="seeimg();"/>
<img id="imgdisplay" style="display:none;"/>
</body>
</html>

F. 實現下面代碼的上傳圖片並瀏覽的功能，html+js實現，求指教，在線等。。。

單純的 JS 不能實現文件上傳，僅能做預覽（而且還要看瀏覽器的隱私設置是否允許）。

代碼：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
</head>
<body>
<scripttype="text/javascript">
functionshowImage()
{
//獲取文件路徑
varpath=document.getElementById('upload').value;
//顯示文件路徑
document.getElementById('imgName').innerHTML=path;
//創建img
varimg=document.createElement('img');
//載入圖像
img.src=path;
//插入圖像到頁面中
document.getElementById('imgPrev').appendChild(img);
}
</script>
<tableborder="1"style="width:1000px">
<trclass="midTable1td1"style="height:50px;">
<tdalign="center">圖片描述</td>
<tdalign="center">圖片</td>
<tdalign="center">操作</td>
</tr>
<trclass="midTable1td2"style="height:200px">			
<tdid="imgName"class="inputContent"align="center">顯示圖片名</td>
<tdid="imgPrev"align="center">顯示圖片</td>
<tdalign="center"><inputtype="button"name="Submit2"value="刪除"class="button"></td>
</tr>
</table>
<form>
<inputtype="file"id="upload"onChange="showImage()"/>
</form>
</body>
</html>

G. html input file 屬性怎麼能夠選擇之後馬上預覽圖片

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<inputtype="file"id='file';onchange="c()">
<imgsrc=""id='show'>
</body>
<scripttype="text/javascript">
functionc(){
varr=newFileReader();
f=document.getElementById('file').files[0];
r.readAsDataURL(f);
r.onload=function(e){
document.getElementById('show').src=this.result;
};
}
</script>
</html>

這是html5

或者用ajax上傳伺服器後再回傳回來

js直接獲取文件本地路徑版會產生安全權問題

H. 如何添加、刪除HTML結點 & 上傳圖片預覽

用到Jquery插件 <div class="aa"></div> <div class="bb"></div> 添加節點： $(".aa").append(".bb"); 節點aa後面添加bb節點刪除節專點： $(".bb").remove(); 刪除最後一個節點$(".bb:last").remove(); 上傳圖片預覽屬: $("#flie").change(function(){ //上傳控制項上傳的預覽 $("#img1").attr("src","file:///"+$("#flie").val()); }) <input id="flie" name="flie" type="file" /><br> <img id="img1" width="500" height="200" src="">

I. 如何用html實現按鈕上傳圖片，並且圖片縮略圖顯示在按鈕上方

+分點贊

<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

</style>
</head>

<body>
<div></div>
<input type="file" multiple="multiple" onchange="upload(event)">

</body>
</html>
<script type="text/javascript">
const [el,stage] = [
document.querySelector('input'),
document.querySelector('div'),
]

function upload({target}){
if(!target.files.length) return;

for(const file of target.files){
const img = new Image();
img.src = URL.createObjectURL(file);
stage.appendChild(img);
}
}

</script>

J. 在用input上傳圖片時如何在旁邊預覽

核心思想是：圖片上傳成功後，本頁面保持不刷新。
核心技巧是： form target

代碼專：

<iframe id='hydro_emergency_team_uploadPhoto_if' style='display:none' name='send'><html><body>x</body></html></iframe>
<form id='xx' method='post' enctype='multipart/form-data' target='send' action="upload.php">
<input type="file" name="file" />
<input type="submit"/>
</form>

這段代碼表示：表單提屬交後，本頁面不會刷新，僅僅是刷新 iframe 而已

閱讀全文

html預覽上傳圖片

與html預覽上傳圖片相關的閱讀推薦