当前位置：首页 » 编程语言 » 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预览上传图片相关的阅读推荐