读取input:file的路径并显示本地图片的方法

最新推荐文章于 2021-02-24 15:26:38 发布
最新推荐文章于 2021-02-24 15:26:38 发布
阅读量2.1w 收藏 4
点赞数 2
分类专栏： HTML 
<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
var loadImageFile = (function () { 
if (window.FileReader) { 
var oPreviewImg = null, oFReader = new window.FileReader(), 
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 


oFReader.onload = function (oFREvent) { 
if (!oPreviewImg) { 
var newPreview = document.getElementById("imagePreview"); 
oPreviewImg = new Image(); 
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
newPreview.appendChild(oPreviewImg); 
} 
oPreviewImg.src = oFREvent.target.result; 
}; 


return function () { 
var aFiles = document.getElementById("imageInput").files; 
if (aFiles.length === 0) { return; } 
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
oFReader.readAsDataURL(aFiles[0]); 
} 


} 
if (navigator.appName === "Microsoft Internet Explorer") { 
return function () { 
alert(document.getElementById("imageInput").value); 
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 


} 
} 
})(); 
</script> 
<style type="text/css"> 
#imagePreview { 
width: 160px; 
height: 120px; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
<div id="imagePreview"> 
</div> 
<form name="uploadForm"> 
<p> 
<input id="imageInput" type="file" name="myPhoto" οnchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
</form> 
</body> 
</html>

DracoTianlong
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
如何在input标签选择图片上传并设置图片大小以及点击图片可以选择删除
小雨的博客
11-12 2469
1、引入jquery库，选择正确放jquery文件的路径 2、放一个文件选择的的标签 3、写一个用于存放图片的容器 4、引入一个 5.image-file.js内容如下： (function($) {        $.imageFileVisible = function(options) {           // 默认选项 var defaults = {     /
new FileReader()
weixin_30483495的博客
09-26 4655
一、调用FileReader对象的方法 方法名 参数 描述abort none 中断读取readAsBinaryString file 将文件读取为二进制码readAsDataURL file 将文件读取为 DataURLreadAsText file, [encoding] 将文件读取为文本 readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-...
FileReader，将图像加载到网页中
zhou_xijian的博客
04-24 219
FileReader，将图像加载到网页中 FileReader允许访问本地文件系统并使用JavaScript加载文档。 这样就完成了用于选择本地文件的，因为此标记只能将该文件的内容与表单数据一起提供给服务器上的脚本。 相容性测试 当前的浏览器可以识别File API ，其中包括FileReader对象? 结果File API supported. 测试源代码： <script> i...
HTML5之FileReader的使用
热门推荐
骆昊的技术专栏
05-23 14万+
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法： 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr =
input-File选择图片展示在页面上
qq_40530899的博客
05-09 951
/** 建立一個可存取到該file的url @param file @returns {*} / var getObjectURL = function (file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if...
input[type='file']图片选择后在页面显示
hot_boom_dog的博客
09-19 1265
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></s...
利用html5 file api读取本地文件示例(如图片、PDF等)
09-28
本篇文章主要介绍了利用html5 file api读取本地文件示例(如图片、PDF等)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C#中winform使用相对路径读取文件的方法
12-31
本文实例讲述了C#中winform使用相对路径读取文件的方法。分享给大家供大家参考。具体分析如下： 目录结构如下图所示：   方法一：由于生成的exe文件在bin\debug目录下，可以使用向上查找目录的方式获取要读取的xml...
js获取上传文件的绝对路径实现方法
12-10
input type="file" id="importFile" /> <input type="button" onclick="upload()"/> [removed] function upload() { var filename = document.getElementById("importFile").value; // 这时的filename...
input type="flie" 图片上传 预览
anran_1211的博客
12-19 311
隐藏input控件透明度opacity=0的办法， 图片的预览实现原理使用了javascript里的createObjectURL方法。 css部分： * { margin: 0; padding: 0; list-style: none; } body { position: relative;
将获取的flie图片显示到页面
纯黑色山羊
08-21 251
需求描述 需要上传图片至后端，并且需要前端将上传的图片显示出来，且后端并不会返回上传的图片的路径 实现方式 FlieReader对象获取图片的base64位数据显示图片 原理：FlieReader对象允许Web应用程序异步读取存储在用户计算机上的文件；通过设置FlieReader实例对象的onload事件获取使用readAsDataURL读取的文件信息（返回data：URL格式的Base64字符串），来显示图片，代码如下： <template> <div>
input file 显示本地图片
yuyu_2019的博客
02-24 1289
input type="file"把一张本地的图片以图片形式显示在页面上 <form action="" enctype="multipart/form-data"> <input id="file" class="filepath" accept="image/png, image/jpeg, image/gif, image/jpg" @change="changepic(this)" type="file
FileRreader js 读取 input[type=file] 内容， 直接显示文本 | 图片
10-16 1万+
js 读取input[type=file] 在 HTML 文档中 &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;file&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; 标签每出现一次， 该元素包含一个文本输入字段，用来输入文件名， 还有一个按钮，用来打开文件选择对话框以便图形化选择文件。 该元素的 value 属性保存了用户指定的文件的名称，但是当包含一
读取input:file的路径并显示本地的图片
gwpJava的专栏
08-16 1098
html lang="en-US"> head> meta charset="UTF-8"> title>title> head> body> input type="file" name="file" id="file" /> img src="" alt="预览" title="预览" /> script type="text/javascript" s
html5 new FileReader()生成图片
stone10086的博客
05-03 9863
html5 使用readAsDataURL生成的base64编码的图片是2进制流，其优点是减少http的请求，缺点是不能跨域缓存。 注：所以在微信本地上传图片直接使用readAsDataURL，安卓是获取不到图片的，需要将其转换为图片，并存入服务器， 例如： var reader = new FileReader(); reader.onload = (func...
选择图片上传可以预览图片
weixin_43260483的博客
11-27 283
<style type="text/css"> #imagePreview { width: 100px; height: 100px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <script...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值