HTML页面上传图片直接预览

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<div class="yanzRight">
<input name="evidence" οnchange="uploadImg(this,'preview')" type="file"/>
<span class="dui" id="imgOrder_dui" style="display: none;"></span>
</div>
<div id="preview">
<img src="" alt="" id="imghead5" height="200" width="200" />
</div>

</body>

<script>
function uploadImg(file,imgNum){
var widthImg = 200; //显示图片的width
var heightImg = 200; //显示图片的height
var div = document.getElementById(imgNum);
if (file.files && file.files[0]){
div.innerHTML ='<img id="upImg">'; //生成图片
var img = document.getElementById('upImg'); //获得用户上传的图片节点
img.onload = function(){
img.width = widthImg;
img.height = heightImg;
}
var reader = new FileReader(); //判断图片是否加载完毕
reader.onload = function(evt){
if(reader.readyState === 2){ //加载完毕后赋值
img.src = evt.target.result;
}
}
reader.readAsDataURL(file.files[0]); 
}
}
</script>
</html>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现JavaWeb上传图片预览,可以按照以下步骤进行: 1. 在HTML页面中添加一个文件上传表单,例如: ``` <form action="upload.jsp" method="post" enctype="multipart/form-data"> <input type="file" name="image" id="image"> <input type="submit" value="上传"> </form> ``` 2. 在后台Java代码中,处理文件上传并保存文件,例如: ``` Part filePart = request.getPart("image"); // 获取上传的文件 String fileName = UUID.randomUUID().toString() + "." + getFileExtension(filePart); // 生成文件名 String filePath = getServletContext().getRealPath("/uploads/") + fileName; // 生成文件保存路径 filePart.write(filePath); // 保存文件 ``` 其中,`getFileExtension`是一个自定义的方法,用于获取上传文件的扩展名。 3. 在HTML页面中,使用JavaScript预览上传图片,例如: ``` <script> function previewImage() { var reader = new FileReader(); reader.onload = function(event) { document.getElementById("preview").setAttribute("src", event.target.result); }; reader.readAsDataURL(document.getElementById("image").files[0]); } </script> <img id="preview" src="" alt="预览图片"> <input type="file" name="image" id="image" onchange="previewImage()"> ``` 其中,`previewImage`是一个自定义的方法,用于预览上传图片。该方法使用`FileReader`对象读取上传文件,并将其转换为DataURL,然后将DataURL设置为`<img>`标签的`src`属性,从而实现图片预览。 以上是一个简单的JavaWeb上传图片预览的实现方式,你可以根据自己的需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值