JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

最新推荐文章于 2019-07-22 23:15:00 发布
最新推荐文章于 2019-07-22 23:15:00 发布
阅读量2.8w 收藏 12
点赞数 11
分类专栏： nodejs技术分享 javascript前端 文章标签： javascript chrome ie jquery插件 button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dan_blog/article/details/7703606
版权
本文介绍了如何使用JavaScript实现本地图片上传的预览功能，该功能兼容IE、Chrome和Firefox浏览器。通过imgAreaSelect、FileReader以及处理IE的滤镜效果，创建了一个图片预览小窗口。代码已上传至GitHub仓库https://github.com/tnodejs/imgpreview，建议通过客户端访问如http://localhost/imgpreview/index.html，避免直接打开HTML文件。
摘要由CSDN通过智能技术生成

摘要

本人个人nodejs分享论坛：tnodejs.com
需要解决的问题有：本地图片如何在上传前预览、编辑；
最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。

关键词：imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果

一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web
最低0.47元/天 解锁文章
danhuang
关注
专栏目录
JavaScript 图片上传预览效果(支持ie7/ie8,firefox 3.55)
01-05
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。 例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
图片上传预览的简单代码
大象的博客
12-25 413
效果如下图 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <tit
图片的上传与预览（三行代码实现）
chizi7811的博客
07-22 193
第一步：创建一个springboot项目 第二步：编写controller层 package com.atzhongruan.springboot_pngupload.controller; import org.apache.tomcat.util.http.fileupload....
兼容IE、firefox、chrome的file上传控件
nevergiveup_zt的专栏
06-04 434
<input type="file">这个控件在不同的浏览器下，显示出的效果如下：    为了达到样式统一，解决办法如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath();
兼容IE chrome FF 图片上传前预览
08-05
这段代码是用于在图片上传前实现预览功能的，它兼容了Internet Explorer（IE）、Chrome 和 Firefox 这三种主流浏览器。在用户选择图片文件后，可以在网页上显示一个缩放后的预览图，确保预览图像的宽度和高度不超过...
[php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome
02-14
本项目 "[php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome" 提供了一种利用iframe技术实现跨浏览器兼容的图片上传预览方案。以下是关于这个项目的一些关键知识点和详细说明： 1. **Iframe（内联框架）**：Iframe是一...
js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9
01-05
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
兼容ie6、ie7、ie8 和FF的本地上传图片预览
03-28
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点： 1. **FileReader API**：这是一个HTML5的新特性，用于读取文件。在支持的浏览器中，可以通过`FileReader.readAsDataURL(file)`方法...
java实现图片上传预览
05-03
java实现图片上传预览,包含asp和jsp的实现代码，以及相关说明
用原生JS实现的多张图片上传及预览功能（兼容IE8）（HTML+CSS+JS代码）
11-15
博客说明：https://www.cnblogs.com/xuehaoyue/p/9964475.html
JavaScript 图片上传预览效果
zw7534313的专栏
02-05 107
http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html
Javascript 兼容IE 预览本地上传图片方法
Lostlover
08-10 505
var loadImageFile = (function () { if (window.FileReader) { var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|ima
实现本地图片预览（ie11,chrome最新版，firefox最新版已测式通过）
liunian110110的专栏
03-04 1708
MyHtml.html function previewImage(){ //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){   //这里用来提示用户的浏览器不支持图片预览所使用FileReader接口  alert("你的浏览器不支持FileReader接口。无法看到图片预览");     //使选择控件
关于IE 中上传图片时用JavaScript预览本地图片的功能失效
weixin_30371875的博客
11-10 95
最近做一个小项目时里面有个用JavaScript预览本地图片的功能，但是我在IE中调试怎么都不显示. 用IE的开发人员工具(F12)对JavaScript进行调试监视path=C:/fakepath/Chrysanthemum.jpg 到了document.getElementById("myimg").src=path执行过后得到的路径是file:///C:/fakepath/Ch...
解决上传图片预览在浏览器中不显示的问题
tangbin0505的博客
08-26 7754
使用一个图片上传预览插件uploadPreview插件 引入uploadPreview.min.js文件 <script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery.min.js"></script> <script type="text/javascrip...
javascript预览本地图片
weixin_30699741的博客
03-10 58
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="buexplain"> <meta...
JavaScript实现实时预览type=file上传的图片（IE/Chrome兼容）
本文主要介绍如何在JavaScript中实现在IE（Internet Explorer）和Chrome浏览器上实现`type=file`选择的图片的实时预览。由于这两种浏览器在处理HTML5 File API的方式上有差异，因此需要编写特定的代码来适应它们。 ...
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

danhuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值