jackyrong
- 浏览: 7935950 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi：
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng：
(转）JAVA获得机器码的实现 -
albert0707：
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707：
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle：
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
在客户端中，用JS实现文件上传时的图片预览，是个不错的选择，但其实在IE，FIREFOX下还好，在opera,safi,chrome下却不行的，下面转个在ie,firefox下实现的方法
firefox使用了getAsDataURL方法，而IE是用了滤镜。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var fileName = docObj.value;
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '120px';
imgObjPreview.src = docObj.files[0].getAsDataURL();
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "120px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
一个更完善的方案讲解，可以参考http://hudeyong926.iteye.com/blog/693018
firefox使用了getAsDataURL方法，而IE是用了滤镜。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var fileName = docObj.value;
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '120px';
imgObjPreview.src = docObj.files[0].getAsDataURL();
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "120px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
一个更完善的方案讲解，可以参考http://hudeyong926.iteye.com/blog/693018
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 816刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 533三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1570http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 814https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1694即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 1007不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3019参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93121. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 645http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 844http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9981 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 588虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 562【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1427https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 817深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 959(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1144https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3156http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1584canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 573http://www.ruanyifeng.com/blog/ ...
相关推荐
【纯 js 实现得 图片上传预览插件】 在前端开发中，图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且...
js实现图片上传预览功能，自己稍微加工了一下，这个在IE9上面挺有意思的，alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30，第二次之后就会显示图片的实际大小，具体原理不懂，有明白的...
"原生JS实现图片上传前的预览"是一个基础但至关重要的技术点，尤其对于初学者而言，掌握这一技能能够提升项目的交互体验。在这个场景下，我们通常会用到HTML5中的File API，它提供了对用户选择的文件进行读取、操作...
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
在图片上传中，JS通常用于处理用户选择文件后在本地预览图片，验证文件类型和大小，以及提供一个友好的用户体验，如进度条显示上传进度。 1. **图片预览**：使用HTML5的FileReader API，开发者可以读取用户选择的...
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
"JS上传图片预览技术" 在Web开发中，上传图片预览...JS上传图片预览技术是通过 HTML、CSS 和 JavaScript 实现的，该技术可以跨浏览器实现图片上传预览功能，並且能够自动调整图片的尺寸以适应不同的浏览器和屏幕尺寸。
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤，理解并掌握这些知识点，可以构建出稳定且用户体验良好的图片上传预览功能。
2. **图片预览**：在用户选择图片后，我们可以在页面上实时预览图片。这可以通过JavaScript的FileReader API实现。在AngularJS的控制器中，我们可以添加一个方法来处理预览： ```javascript $scope.uploadImage = ...
这个DEMO是一个完整的图片上传预览并使用AJAX提交的流程，适用于现代浏览器。它结合了HTML5的新特性与JavaScript的异步处理能力，为用户提供了一种流畅的交互体验。在实际项目中，可能还需要考虑更多细节，比如兼容...
- 实现图片预览功能，使用JavaScript编写即时图片预览的代码，当用户选择图片时，预览区域会显示选中的图片。 - 使用base64编码方式将图片存储为字符串，并在视图中用标签展示。Razor语法可以帮助简化此过程。 5. ...
在这个场景下，我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先，我们要了解`bootstrap-fileinput`，这是一个基于Bootstrap的高级文件输入插件，由Krajee提供。这个插件极大地扩展了...
本知识点将围绕“js图片上传预览效果”这一主题，结合提供的文件名列表，深入讲解实现这一功能的关键技术和步骤。 首先，`ImagePreview.ashx`可能是服务器端处理图片预览的处理程序，它可能接收图片数据并返回预览...
在JavaScript编程中，预览图片是一项常见的需求，特别是在文件上传功能中。用户在选择图片文件后，能够在上传之前先预览图片，这样可以提供更好的用户体验，确保用户上传的图片符合预期。这个标题提到的"js预览图片 ...
js 实现 上传图片时预览! 值得下载看看!资源免费,大家分享!!
预览图片的大小可以通过JavaScript动态修改`<img>`标签的`height`和`width`属性来实现。在示例代码中，用户可以输入图片的宽度和高度，`img()`函数会根据这些值调整预览图片的尺寸。 3. 上传格式控制： 虽然前端...
【zyUpload实现图片预览上传】是一个用于网页端图片上传并提供预览功能的解决方案，它支持HTML5、Java和PHP等技术。这个工具的主要优点是用户在上传图片之前可以预览效果，增强了用户体验，同时也提供了多语言后端...
【标题】：“纯js实现浏览器图片选择预览、旋转、批量上传” 这篇博客主要讨论了如何使用纯JavaScript在浏览器环境中实现实现图片的选择预览、旋转以及批量上传功能。JavaScript是一种广泛应用于网页开发的编程语言...
本文将深入探讨如何使用JavaScript（JS）和HTML5技术来实现在网页上上传图片并实时预览的效果。这一功能允许用户在正式提交之前查看他们选择的图片，增加了交互性和准确性。 首先，HTML5引入了一项新特性——`...
2. 当鼠标悬浮在预览图片上时，会弹出一个跟随鼠标的大图预览，提高了用户体验。 3. 当鼠标离开预览图片时，大图预览自动消失。 通过这种方式，不仅提升了用户体验，还让整个界面更加生动有趣。对于那些需要用户...