上传图片预览

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量100 收藏
点赞数
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014164005/article/details/84912714
版权 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img {
	width: 200px;
	height: 200px;
}

#preview {
	border: 1px solid #000;
}
</style>
</head>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preview(file) {
	var prevDiv = document.getElementById('preview');
	if (file.files && file.files[0]) {
		var reader = new FileReader();
		reader.onload = function(evt) {
			prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
		}
		reader.readAsDataURL(file.files[0]);
	} else {//这是兼容IE 的
		$("#preview").find("img").remove();
		prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
	}
}

$(function(){
	$(".divClass").off("change").on("change",".uploadFile",function(){
	//$("#uploadId").change(function(){
		preview($(this)[0]);
	});
})

</script>

<body>
	<div id="preview">
		<img width="200px" height="200px" class="imgClass" src="" />
	</div>
	
	<div class="divClass">
		<input type="file" id="uploadId" class="uploadFile" />
	</div>
	
</body>
</html>

 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 

 

来源：http://wangyong31893189.iteye.com/blog/1695472

 

 

注：在上传其他的上传过程中（不是本案例），得到上传的路径时，比如原本路径是：c:\administrator\user\aa.png  变成了C:\fakepath\aa.png。并且图片无法预览。这是由于浏览器的安全问题，如IE


 



 

 

选中启用即可。

 

 

 

哈哈哈·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端上传图片预览
mvpzx的博客
09-09 2881
前端上传图片预览此文将介绍两种方法来实现前端上传图片预览。方法1：FileReader FileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自一个HTMLC
html 上传图片前预览,HTML实现图片上传前预览
weixin_29344197的博客
06-04 1189
HTML5 Upload#destination{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);}//处理file input加载的图片文件$(document).ready(function(e) {//判断浏览器是否有FileReader接口if(typeof FileRea...
extjs上传图片预览
小冰的程序员之旅
08-21 1033
EXTJS图片上传预览(含本地上传前预览和服务器图片预览) 创建EXTJS组件 1 //生成messagePanel 2 createMessagePanel:function(){ 3 return Ext.create('Ext.panel.Panel',{ 4 itemId:'compPanel', 5 ...
❤️vue 上传图片预览的方法
再见少年拉满弓,不惧岁月不惧风
06-09 2763
二、将 File 对象转成 url 三、总结与思考 总结 设置默认图片：将图片作为模块导入，定义变量接收，赋值给图片的 其他方法：使用自定义指令设置默认图片、在模板中使用 v-if 等 点击上传图片按钮，触发图片输入框的 事件 隐藏图片输入框： 或 绑定图片输入框 的 事件，获取文件对象 判断 的 长度为0：用户取消选择图片，传给后台的数据就是 ，把默认图片赋值给当前预览区 长度为1：用户确认选择图片，把 传给后台 用
React AntDesign中上传图片预览功能
Mozifei73的博客
07-07 2033
现需求就是上传之后的图片再次进入的时候 该组件呈现可预览并且删除之后可以再次上传 图片个数限制最多传3张效果如图：图片上传 预览 回显 这里用到了获取文件的 base64 字符串形式 完成代码下： 没有太多文字类的描述，只能用代码表示，这里表示直接复制代码，然后根据需求在改改就大功告成啦！！！...
图片上传并预览
热门推荐
JS小学生的博客
08-05 2万+
思路：完成这个功能，首先需要美化上传图片的按钮，然后添加一个&lt;img/&gt;标签，在图片上传之后，用新图片的src替换原来&lt;img/&gt;标签中的src。 如下图所示，是原始的按钮样式： 美化步骤： （1）将上传图片标签采用绝对定位，使之位于一个图片，按钮，div等标签上。或者给图片，按钮或div设置绝对定位，总之，是要让上传文件按钮和用户指定的按钮重合。 （2）给上传...
最常用的两种上传图片预览方式
qq_51369065的博客
10-15 935
方法1是浏览器为选择的图片设置一个虚拟路径，再将这个虚拟路径赋值给img标签的src 方法2是将选中的图片转换为base64位的编码，再将这个编码赋值给img标签的src。这个编码是独一无二的，可以在任何浏览器中通过地址访问 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g.
iView的Upload组件实现上传图片预览
canyang666666的博客
10-11 2464
在iView官方给出的upload组件上传图片案例中，图片的预览在每上传一个图片调一次接口，后台将图片存入数据库后，再回传给前端来实现图片预览。而大多情况我们只是想先预览图片内容是否正确上传图片。 针对这种情况， 1.我们可以先获取图片的base64即图片的在我们本机的绝对路径； handleUpload (file) { ...
Vue实现点击上传图片预览图片功能
IU
09-12 3817
效果 删除按钮是我自己做的 下面上源代码（如果不理解，请在下面提出问题） html(采用了element组件) <div> 上传图片： </div> <div style="display:flex;flex-wrap: wrap;justify-content:Center"> <...
vue上传图片并预览
weixin_39150852的博客
03-29 1万+
html代码： <div id="headImg"> <div id="myPhoto"> <div class="viewPhoto" @click="monidianji"> <i cl...
jQuery实现上传图片预览
11-16
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
js 上传图片预览问题
01-19
最近也经常遇到浏览器兼容的问题，昨天遇到上传图片预览问题，发现IE8和火狐不能显示，弄了很久，早上终于解决了很高兴。故跟大家分享下，我也多是网上找的，自己总结的一下，希望对大家有点帮助。 我们一般根据IE6...
input file上传图片预览
12-30
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
C#上传图片预览11111
04-17
本主题聚焦于"C#上传图片预览"，这是一个常见的功能需求，无论是在网页上还是桌面应用中，用户通常希望在实际上传图片前能预览图片效果。这一功能不仅提升了用户体验，也减少了因误传错误图片而造成的困扰。 在C#中...
js上传图片预览图片.pdf
10-08
"JS上传图片预览技术" 在Web开发中，上传图片预览功能是非常常见的需求。通过HTML、CSS和JavaScript可以实现图片上传预览的功能。本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先，...
vue ref和reactive区别
最新发布
灰海
08-25 569
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 390
npm。
2024前端面试题-js篇
FormAda的博客
08-22 943
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 384
【代码】【js】各类前端输入校验方法。
前端下载文件以及上传图片预览，顺便了解arrayBuffer和blob
06-06
好的，让我先回答你的问题。前端可以通过创建一个 `a` 标签并设置其 `href` 属性，然后使用 JavaScript 触发点击事件来实现文件下载。例如： ```javascript function downloadFile(url, filename) { const link = document.createElement('a'); link.href = url; link.download = filename; link.click(); } ``` 至于上传图片预览，可以使用 HTML5 中的 `FileReader` API。例如： ```html <input type="file" onchange="previewImage(event)"> <img id="preview"> <script> function previewImage(event) { const input = event.target; if (input.files && input.files[0]) { const reader = new FileReader(); reader.onload = function() { const image = document.getElementById('preview'); image.src = reader.result; } reader.readAsDataURL(input.files[0]); } } </script> ``` 关于 `arrayBuffer` 和 `blob`，它们都是 JavaScript 中的二进制数据类型。 `arrayBuffer` 是一种固定长度的缓冲区，用于存储二进制数据。它不能直接被读取或写入，需要结合其他 API（如 `DataView`）来使用。 `blob` 则是一种可变长度的二进制数据类型，可以用于存储任何类型的文件或数据。它通常用于将二进制数据上传到服务器或者在浏览器中预览文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值