js 上传图片本地预览缓存

最新推荐文章于 2023-11-06 19:04:43 发布
最新推荐文章于 2023-11-06 19:04:43 发布
阅读量229 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/xuanwang/p/7163831.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="jQuery.js"></script>
<style type="text/css">
#file{
display: block;
width: 400px;
height: 300px;
opacity:0;
margin: -300px 0 0 0;
}
#preview{
display: block;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<img id="preview" src="" alt="点击上传图片"/>
<input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
$('#file').on('change', function(){
//获取文件列表对象
var fileList = $('#file')[0].files;
//创建文件流获取文件地址
var src = URL.createObjectURL(fileList[0]);
//设置图片路径
$("#preview").attr("src", src);
});
</script>

转载于:https://www.cnblogs.com/xuanwang/p/7163831.html

weixin_30776863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html5上传图片前本地预览
04-10
Html5上传图片前生成本地预览，可以在本地预览图片，再上传到服务器
JS 上传图片本地缓存预览
weixin_34258782的博客
02-26 235
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文件上传&lt;/title&gt; &lt;script src="jQuery.js"&gt;&lt;/script&gt;
html5图片本地缓存,HTML5: 本地缓存
weixin_35628611的博客
06-04 659
HTML5 提供了两种在client存储数据的新对象：localStorage：没有时间限制的数据存储，在同一个浏览器中，仅仅要没被手动清理，第二天、第二周或下一年之后，数据依旧可用。sessionStorage：针对一个 session 的数据存储。针对一个 session 进行数据存储。当用户关闭浏览器窗体后，数据会被删除(并且仅仅在当前窗体有效)。下面是使用这两个对象的样例：在client存...
js保存图片至本地
热门推荐
weixin_42141454的博客
04-28 1万+
第一种方法 downloadIamge(imgSrc) { //imgSrc 为图片链接路径 // 必须同源才能下载 var alink = document.createElement("a"); alink.href = this.imgs; alink.download = "pic"; //图片名 alink.click(); } 第二种方法 saveImg:function(){ this.downloadIamge(this.imgsrc, 'sha...
图片上传下载——保存到本地or保存到云服务器
最新发布
m0_59555392的博客
11-06 3193
详细介绍了图片上传下载业务功能涉及到的常见问题，文件保存到本地与保存到云服务器的代码实现。
上传图片本地预览
12-26
在IT领域，"上传图片本地预览"是一个常见的功能需求，尤其在网页应用或桌面软件中，用户在上传图片前能够预览图片内容，可以极大地提升用户体验。这一功能的实现涉及多个技术点，包括文件读取、图片处理、前端与后端...
Element-UI中Upload上传文件前端缓存处理示例
10-17
在Element-UI中，Upload组件主要用于实现文件上传功能，它是一个强大的、易于使用的组件，能够与后端服务器进行交互，将用户选择的文件传递到指定...这对于实现某些特定功能，如预览或编辑本地数据文件，是非常有用的。
图片预览_图片预览_simpled98_
10-04
1. 图像处理库：为了实现图片的快速预览，这个插件可能使用了常见的图像处理库，如JavaScript中的`canvas`元素，或者依赖于第三方库如`Fabric.js`或`Pixi.js`。这些库提供了强大的图像操作能力，包括解码、缩放、...
微信小程序实现上传图片功能
08-27
2. 缓存图片：将选择的图片缓存在本地 3. 上传图片：使用wx.uploadFile() API将图片上传到服务器端 4. 获取图片地址：从服务器端获取图片地址 5. 更新图片列表：将上传的图片添加到图片列表中 微信小程序图片上传...
基于Spring Boot利用 ajax实现上传图片功能
10-16
这里有一个`<input type="file">`元素让用户选择图片，一个`<p>`元素显示图片预览，以及一个`<input type="button">`按钮触发上传操作。在JavaScript部分，我们使用jQuery库和Ajax进行异步文件上传。当用户点击...
原生js FileReader对象实现图片上传本地预览效果
12-09
本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> <style> label{display: inline-block;w
前端(js)实现图片缓存的方法
Xiaoze的博客
12-21 8605
当我们想遍历图片展示时，如果图片加载缓慢会造成图片一张张加载十分不美观，有些图片由于没有加载成功还会会显示失败，如果等程序要用到时再从远程服务器下载的话可能来不及，对用户体验来讲影响很大。所以可以先将图片缓存，需要时直接使用即可。 //需要预加载的图片路径存放在数组里 var imgsrc=[ "1.jpg", "2.jpg", "3.jpg" ]; //初始化image对象 var img = new Image(); //遍历数组的路径，预加载到客户端 for (var i =
JS缓存图片实例
talentluke的专栏
12-16 579
JS缓存图片实例 现有JS功能越来强大了，很多基于JS的Web Game做得都非常好。但JS程序不像客户端程序，很多程序里需要使用到的图片、资源等都要从远程服务器获取。因此如果等程序要用到时再从远程服务器下载的话可能来不及。对用户体验来讲影响很大。因此就需要提前为JS程序缓存需要用到的资源文件。下面就来介绍一下最常用的图片缓存。 首先大家可以看一下这个 示例 ，这是一个简单的抽奖程...
js读取本地图片 并显示图片 浏览器缓存图片不保存
凡尘雪的博客
01-20 1847
&lt;div class="form-group"&gt; &lt;div class="col-sm-8"&gt; &lt;!--label for="自定义" 要与input name="自定义" 一致--&gt; &lt;label for="id_avatar"&gt;
利用JS实现图片的缓存
weixin_34242658的博客
06-25 827
web页面使用HTML的<img>元素来嵌入图片，和所有HTML元素一样，<img>元素也是可以通过脚本来操控的(设置元素的src属性，将其指向一个新的URL会导致浏览器载入并展示一张新的图片)。为了让图片缓存起来，客户端JS定义了一个API，首先利用Image()构造函数来创建一个屏幕外图片对象，之后将该对象的src属性设置 期望的URL，由于图片元素并没有添加到文档中，...
前端图片上传浏览器缓存
qq_38867257的博客
09-18 932
项目技术：iview+vue.js 遇到问题：使用iview的upload组件进行审核图片的上传，但是在审核页面出现此用户之前上传的图片，判断为浏览器缓存所致。 解决办法：在图片回填地址中URL中加入随机字符串 id=${Math.random().toString(36).slice(2)} 暂时想到的解决办法，还在思考中。。。 ...
使用JavaScript将图片保存至本地
diee9429的博客
01-03 883
在最近的开发当中，我们需要为img标签以及canvas动态绘制的图像提供下载功能，下面是经过探索后我们得出的结果。 一、Canvas 版本 // 下载Canvas元素的图片 function downloadCanvasIamge(selector, name) { // 通过选择器获取canvas元素 var canvas = document.querySelecto...
js如何实现图片本地缓存
04-08
JavaScript可以通过localStorage来实现图片本地缓存。首先，将图片转化为Base64编码，然后将编码后的字符串存储到localStorage中，以便下次使用时直接从本地获取。以下是示例代码： // 将图片转化为Base64编码 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL; } // 将图片缓存到本地 function cacheImage(imgSrc) { var img = new Image(); img.src = imgSrc; img.onload = function() { var base64Img = getBase64Image(img); localStorage.setItem(imgSrc, base64Img); }; } // 从本地获取缓存的图片 function getCachedImage(imgSrc) { var base64Img = localStorage.getItem(imgSrc); var img = new Image(); img.src = base64Img; return img; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值