前端实现上传图片的预览

最新推荐文章于 2023-07-10 11:12:01 发布
最新推荐文章于 2023-07-10 11:12:01 发布
阅读量239 收藏 1
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41950223/article/details/107717964
版权

前端实现上传图片的预览

创建HTML

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body> 
<div id="submit_area" οnclick="submit()">+上传图片 </div> 
<input id="submit_img" type="file" style="display: none" οnchange="preview(this)">
</body>
</html>

编写CSS

#submit_area{   
		  width:240px;
		  height:135px; 
		  background-color: #f3f5f4; 
		  text-align: center;   //文字内容水平居中
		  margin-top: 20px;   
		  line-height: 135px;//行高和height设置一样时 ，可以垂直居中    
		  margin-left: 100px;
		  cursor:pointer; //鼠标划入区域时编程小手
		  }

编写js

 function submit(){      
 	document.getElementById('submit_img').click() //触发被设置为none的input   
}

function preview(e){
	 const windowUrl=window.URL||window.webkitURL||window.mozURL;//适配不同浏览器            
	 if(e.files[0]){                
	 	const imgURL = windowUrl.createObjectURL(e.files[0]);                
	 	document.getElementById('submit_area').style.backgroundImage="url("+imgURL+")";	    
          }    
}

低版本浏览器不支持URL.createObjectURL() ,生成的URL对象会占用大量资源，在不用时可用用URL.RevokeObjectURL()，及时删除。

念兹不忘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现前端图片上传即时预览功能
10-19
至此，一个简单的图片预览功能就完成了。这个示例只实现了基本的本地预览，但实际应用中，可能还需要增加更多功能，如图片大小、类型的验证，或者使用CSS美化UI等。此外，`FileReader`对象还提供了其他方法，如`...
简单的做一个图片上传预览（web前端）
MMryyy的博客
07-04 1657
简单的做一个图片上传预览（web前端） <body class="bg"> <h3>请选择图片文件：JPG/GIF</h3> <form name="form0" id="form0"> <input type="file" name="file0" id="file0" multiple="multiple" /><br&...
js实现上传图片并预览
ssjjrr的博客
02-05 633
js实现上传图片并预览
ssm+vue使用element-UI 进行手动图片上传并实现图片预览
最新发布
m0_56253302的博客
07-10 1959
ssm+vue使用element-UI 进行手动图片上传并实现图片预览 文件上传上传axios与表单数据axios是异步进行的，也就是说没有等到文件上传后台返回文件名，表单提交方法以及执行了。使用upload组件，取消自动上传（auto-upload="false")因为取消了自动上传，只能通过on-change方法来获取上传文件的信息、图片预显示等，再将将文件信息存入表单数据里面，后续使用按钮，实现手动触发，使用axios传入后端在指定文件夹生成图片。
前端上传图片预览
mvpzx的博客
09-09 2863
前端上传图片预览此文将介绍两种方法来实现前端上传图片预览。方法1：FileReader FileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自一个HTMLC
前端js实现图片上传预览
热门推荐
Miss_Liang的博客
06-05 1万+
前端实现图片上传预览，实现的原理是使用input标签，type=file，实现图片的上传，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码，并赋值给img 标签即可。
WEB前端实现裁剪上传图片功能
09-01
以上就是WEB前端实现裁剪上传图片功能的完整流程。需要注意的是，这个过程中还需考虑错误处理、兼容性问题以及用户体验优化，例如提供图片格式检查、上传大小限制、加载提示等。此外，安全性也是重要的一环，确保...
js实现纯前端的图片预览
01-19
偶然从MDN上找到纯前端图片预览的相关资料，经过整理后记录下来以便日后查阅。  一、准备功夫1──FileReader　  FileReader是HTML5的新特性，用于读取Blob和File类型的数据。具体的用法如下： （1）.
angularjs实现上传图片并且预览
04-18
2. **图片预览**：在用户选择图片后，我们可以在页面上实时预览图片。这可以通过JavaScript的FileReader API实现。在AngularJS的控制器中，我们可以添加一个方法来处理预览： ```javascript $scope.uploadImage = ...
支持批量上传、JS图片预览的前端上传组件
12-18
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
纯前端实现图片上传预览（filereader ）
11-23
纯前端实现图片上传预览（filereader ），HTML5 filereader 实现
前端页面图片上传即时预览功能
01-09
下载就可以使用的demo，该demo是在点击上传并选择本地电脑某张图片后就可以在页面进行即时预览的效果，请大家对症下载。
前端实现图片上传预览
weixin_30448685的博客
07-26 374
讲干货，不啰嗦，开发中有时会遇到上传图片并即时生成图片预览的需求，以下为具体实现，主要是应用FileReader对象，有需要的请拿走。 具体实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传预览&...
前端预览上传图片
weixin_44805161的博客
10-17 185
1 本地预览上传图片 h5新增的FileReader构造函数 html结构 <input type="file" name="file" id="file"> <div id="box"></div> js代码 <script> let file = document.getElementById('file'); let ...
前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
你好呀，很高兴你在看这里~
01-23 7130
大家好呀，⭐⭐⭐⭐⭐，秉着分享快乐的原则，我来啦~ 很久以前我写过一篇vue上传图片并显示的文章。 但是上次只是写了前端的，并没有把图片存储在服务器~所以这次出了2.0版本，哈哈，通过node简单写了接口，实现前后端结合！下面是详细代码实现！
9行代码实现图片上传和预览(自定义按钮上传)
技术圈
06-19 2263
h5原生实现，嘎嘎好用，快来copy吧。
前端压缩图片，上传前预览图片
bluelotos893的博客
12-10 210
上传预览图片、前端图片压缩
input 上传图片，获取base64
weixin_34025151的博客
01-04 549
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
javaweb实现上传图片且预览
06-02
实现上传图片并预览，需要以下步骤： 1. 在前端页面添加一个input标签，type属性设置为file，用于选择本地图片上传。 ``` <input type="file" id="fileInput" onchange="previewImage()"/> ``` 2. 在前端页面添加一个用于预览图片的标签，例如img标签。 ``` <img id="preview" src="" alt="预览图片" style="max-width:200px;max-height:200px;"> ``` 3. 在JavaScript中实现预览图片的功能。 ``` function previewImage() { // 获取选择的文件对象 var file = document.getElementById("fileInput").files[0]; // 创建FileReader对象 var reader = new FileReader(); // 读取文件内容 reader.readAsDataURL(file); // 当文件读取完成时触发onload事件 reader.onload = function(e) { // 获取预览图片的标签对象 var preview = document.getElementById("preview"); // 设置预览图片的地址 preview.src = e.target.result; } } ``` 4. 在后端处理上传的图片。 实现上传图片的后端代码可以使用Java提供的Servlet或Spring MVC框架等进行实现。 以下是一个简单的Servlet上传图片的示例代码： ``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上传的文件对象 Part part = request.getPart("file"); // 获取文件名 String fileName = part.getSubmittedFileName(); // 获取文件保存的路径 String savePath = request.getServletContext().getRealPath("/upload"); // 创建保存文件的目录 File saveDir = new File(savePath); if (!saveDir.exists()) { saveDir.mkdirs(); } // 生成保存文件的唯一名称 String uuid = UUID.randomUUID().toString(); String saveName = uuid + "_" + fileName; // 保存文件 part.write(savePath + File.separator + saveName); // 返回保存的文件路径 String filePath = request.getContextPath() + "/upload/" + saveName; response.getWriter().write(filePath); } ``` 在前端页面中，可以使用Ajax将选择的图片文件上传到后端进行处理，并将返回的文件路径设置到预览图片的标签中。 ``` function uploadImage() { var file = document.getElementById("fileInput").files[0]; // 创建FormData对象，用于封装需要上传的数据 var formData = new FormData(); formData.append("file", file); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方式和请求地址 xhr.open("POST", "/uploadServlet"); // 发送请求 xhr.send(formData); // 当请求状态改变时触发onreadystatechange事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 获取预览图片的标签对象 var preview = document.getElementById("preview"); // 设置预览图片的地址 preview.src = xhr.responseText; } } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值