Html5 FileReader实现即时上传图片功能

最新推荐文章于 2025-11-24 09:30:00 发布
原创 最新推荐文章于 2025-11-24 09:30:00 发布 · 575 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文介绍了一种在IE9浏览器中实现图片预览的方法，包括使用filter属性进行图片加载和尺寸调整，确保图片能够在不同分辨率下正确显示。此外，还提供了一个示例代码，演示如何根据不同浏览器特性调整图片预览效果。

下面的是在ie9下面实现的预览，跟ie8还是不一样的，不过我记得貌似ie8好像也是利用了fiter的功能，因为项目只要求在ie9以上，所以就没有写出ie8的啦

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <p><style type="text/css">  
#kk{  
 width:400px;  
 height:400px;  
 overflow: hidden;  
}  
#preview_wrapper{  
 width:300px;  
 height:300px;  
 background-color:#CCC;  
 overflow: hidden;  
}     
#preview_fake{ /* 该对象用于在IE下显示预览图片 */     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);     
 width:300px;  
 overflow: hidden;  
}     
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);    
 width:300px;   
    visibility:hidden;   
 overflow: hidden;    
}     
#preview{ /* 该对象用于在FF下显示预览图片 */     
    width:300px;     
    height:300px;    
 overflow: hidden;   
}     

</style><script type="text/javascript">  


 var path,
          clip = $("#img"),
          FileReader = window.FileReader;

function onUploadImgChange(sender){     
    if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){     
        alert('图片格式无效！');     
        return false;     
    }  
    var objPreview = document.getElementById('preview');     
    var objPreviewFake = document.getElementById('preview_fake');     
    var objPreviewSizeFake = document.getElementById('preview_size_fake');  
    if( sender.files &&  sender.files[0] ){     //这里面就是chrome和ff可以兼容的了
        objPreview.style.display = 'block';     
        objPreview.style.width = 'auto';     
        objPreview.style.height = 'auto';     
             
        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径     
        objPreview.src = sender.files[0].getAsDataURL();         
    }else if( objPreviewFake.filters ){      
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果     
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决     
             
        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径     
        sender.select();  
        sender.blur();  
        var imgSrc = document.selection.createRange().text;       
              objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;     
              objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;    
              alert("已成功选择图片！");  
              alert(objPreviewSizeFake.offsetWidth);
              autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );     
              objPreview.style.display = 'none';     
          }     
      }     
          
      function onPreviewLoad(sender){     
          autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );     
      }     
          
      function autoSizePreview( objPre, originalWidth, originalHeight ){     
          var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );     
          objPre.style.width = zoomParam.width + 'px';     
          objPre.style.height = zoomParam.height + 'px';     
          objPre.style.marginTop = zoomParam.top + 'px';     
          objPre.style.marginLeft = zoomParam.left + 'px';     
      }     
          
      function clacImgZoomParam( maxWidth, maxHeight, width, height ){     
          var param = { width:width, height:height, top:0, left:0 };     
               
          if( width>maxWidth || height>maxHeight ){     
              rateWidth = width / maxWidth;     
              rateHeight = height / maxHeight;     
                   
              if( rateWidth > rateHeight ){     
                  param.width =  maxWidth;     
                  param.height = height / rateWidth;     
              }else{     
                  param.width = width / rateHeight;     
                  param.height = maxHeight;     
              }     
          }     
               
          param.left = (maxWidth - param.width) / 2;     
          param.top = (maxHeight - param.height) / 2;     
               
          return param;     
      }   
      </script> <input name="localfile"  type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是预览图片用的-->  
      <div id="kk">  
      <div id="preview_wrapper">  
      <div id="preview_fake">  
      <img id="preview" src="" onload="onPreviewLoad(this)"/>  
      </div>  
      </div>  
      <br/>   
      <img id="preview_size_fake" />  
      </div></p>
</body>
</html>
html5+css+mui chat聊天窗口聊天气泡 调用相机 手机图册 聊天表情
09-08
html5+css+mui chat聊天窗口聊天气泡 支持调用相机 支持手机图册 聊天表情 支持聊天气泡宽度根据文字长度进行自适应 美观大方
Html5 FileReader实现即时上传图片功能实例代码
09-28
本文将详细介绍如何使用HTML5的FileReader接口实现即时上传图片的功能，特别针对IE9以上的浏览器。由于项目需求，本文未涉及对IE8的支持。 HTML5的FileReader接口是现代Web开发中的一个重要工具，它允许网页直接...
通过HTML5 FileReader实现上传图片预览功能
m0_37310097的博客
07-17 569
在上传图片到服务器之前，我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。 re
html5 存储图片上传,html5 FileReader 图片上传预览
weixin_29026387的博客
06-04 181
例子这个方法很有用,比如,可以实现图片的本地预览 (在线演示)===================================FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操...
html5 FileReader 实现本地图片上传并预览应用实例
baidu_41601048的博客
01-07 1万+
1、FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。   FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...
使用HTML5实现上传图片预览功能
weixin_30483013的博客
03-26 88
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML5实现上传图片预览功能</title> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min....
JavaSctit 利用FileReader和滤镜上传图片预览功能
08-29
JavaSctit（可能是JavaScript的误拼）利用FileReader和滤镜实现的上传图片预览功能，是Web应用中常见的用户交互设计。FileReader对象是HTML5中引入的一个API，它使得JavaScript能够异步读取用户设备上的文件，极大地...
JS中FileReader类实现文件上传及时预览功能
10-15
在本文中，我们将深入探讨如何利用JavaScript中的FileReader类来实现文件上传与及时预览功能。这一功能在现代Web应用中非常常见，尤其是在需要用户上传图片、文档或其他类型的文件时。通过本文，你可以了解到...
原生js FileReader对象实现图片上传本地预览效果
12-09
在本文中，我们将探讨如何使用原生JavaScript的FileReader对象来实现在本地预览图片上传的效果。这个功能在现代Web应用中非常常见，允许用户在实际上传之前预览选定的图片，提供更好的用户体验。 首先，我们需要...
HTML5 APP应用实现图片上传及拍照上传功能
记录编程生活
07-20 1万+
HTML 手机端代码如下： 拍照结果： $(document).ready(init); function init() { //为了便于使用这个接口，先做一下兼容性处理 navigator.getUserMedia = navigator.getUserMedia || navigator.webkit
html上传图片后，在页面显示上传的图片
热门推荐
感恩、奋进、自信
12-02 6万+
html上传图片后，在页面显示上传的图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &lt;input type="file" id="chooseImage" n
input标签上传图片到后端前用H5的FileReader 方法实现图片的显示
zjbkzj的博客
04-11 6682
要想在页面上显示上传的本地图片，以前我们的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而H5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据,将读取的数据放到result中，通多读取到数据就能实现本地图片不需上传就可以显示。目前高级浏览器实现了FileR
html5预览并上传图片的功能
纸上得来终觉浅
07-28 1万+
如何使用html5 fileReader来上传图片呢？
如何通过html上传照片（自定义上传图标）
知他人之所知，晓他人之不晓。
11-24 1万+
在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。 以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。 接下来我们讲讲如何利用html上传照片。 废话不多说。我们来看一段html代码 账号头像*：
html中上传本地图片的按钮
shuiyuehaha的专栏
07-24 2224
H5利用FileReader上传图片
ChauncyWu的博客
01-22 7481
1. Html部分 文件上传演练 Browse... 2. JS部分 var result = document.getElementById("result"); var input = document.getElement
基于Echarts+HTML5可视化数据大屏展示-物流大数据展示
qq_36595761的博客
11-24 1187
本文介绍了一个物流大数据可视化展示系统的前端实现。系统采用HTML+CSS+JavaScript技术栈，使用jQuery库实现页面交互功能，包含三个主要区域：左侧展示基本信息、包裹量排名和商品分类占比；中间区域显示数量统计、地图可视化及月统计数据；右侧区域呈现商品销售排行。系统采用响应式设计，通过JavaScript动态调整字体大小以适应不同屏幕尺寸，并实现了文字滚动效果。整体布局清晰，通过可视化图表直观展示物流相关数据指标，为数据分析提供直观的交互界面。
基于贝叶斯优化CNN-LSTM混合神经网络预测（Matlab代码实现）
最新发布
12-03
内容概要：本文介绍了基于贝叶斯优化的CNN-LSTM混合神经网络在时间序列预测中的应用，并提供了完整的Matlab代码实现。该模型结合了卷积神经网络（CNN）在特征提取方面的优势与长短期记忆网络（LSTM）在处理时序依赖问题上的强大能力，形成一种高效的混合预测架构。通过贝叶斯优化算法自动调参，提升了模型的预测精度与泛化能力，适用于风电、光伏、负荷、交通流等多种复杂非线性系统的预测任务。文中还展示了模型训练流程、参数优化机制及实际预测效果分析，突出其在科研与工程应用中的实用性。; 适合人群：具备一定机器学习基基于贝叶斯优化CNN-LSTM混合神经网络预测（Matlab代码实现）础和Matlab编程经验的高校研究生、科研人员及从事预测建模的工程技术人员，尤其适合关注深度学习与智能优化算法结合应用的研究者。; 使用场景及目标：①解决各类时间序列预测问题，如能源出力预测、电力负荷预测、环境数据预测等；②学习如何将CNN-LSTM模型与贝叶斯优化相结合，提升模型性能；③掌握Matlab环境下深度学习模型搭建与超参数自动优化的技术路线。; 阅读建议：建议读者结合提供的Matlab代码进行实践操作，重点关注贝叶斯优化模块与混合神经网络结构的设计逻辑，通过调整数据集和参数加深对模型工作机制的理解，同时可将其框架迁移至其他预测场景中验证效果。
（142页PPT）大型集团数字化转型智能制造SAP企业信息化ERP整体规划方案.pptx
12-03
（142页PPT）大型集团数字化转型智能制造SAP企业信息化ERP整体规划方案.pptx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值