lanrikey
- 浏览: 52214 次
- 来自: 深圳
-
文章分类
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Js实现图片上传前在本地预览</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
//图片上传预览，IE用了滤镜
function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview">
<img id="imghead" width="100" height="100" border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Js实现图片上传前在本地预览</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
//图片上传预览，IE用了滤镜
function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview">
<img id="imghead" width="100" height="100" border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
分享到：
发表评论
-
IE下使用uploadify上传文件的相关问题解决
2017-10-12 12:14 310SWFUpload.prototype.cleanUp = f ... -
js和java 中文乱码
2016-11-18 11:37 570因为在jsp中对中文进行了编码的时候用的是UTF-8的编码 ... -
js常用方法
2016-08-25 17:37 475当前返回日期yyyy-MM-dd function get ... -
js时间比较/当前时间
2015-12-03 21:49 498var selectDate=edit.getContro ... -
js map类型
2015-08-25 10:11 966<script> function Map2() ... -
javat替换成换行符，关于textarea中换行、回车、空格的识别与处理
2015-08-24 20:05 1669var newString=con.replace(/\n/ ... -
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
2015-07-18 15:24 5073后退时关闭当前页面 < ... -
限制文本框只能输入数字
2015-07-07 15:59 422js控制只允许输入数字 avascript 只允许输入数字有很 ... -
正确优雅的解决用户退出问题——JSP和Struts解决方案(转载)
2015-07-06 17:37 524正确优雅的解决用户退出问题——JSP和Struts解决方案(转 ... -
长度限制
2015-06-12 16:56 675//=============得到输入框长度（包括中文）=== ... -
js input即时监听输入值
2015-06-08 17:01 2548总结一下 ：要想在输入框超过限制长度时候，不给输入。之前是用o ... -
回车和点击实现表单提交
2015-06-02 14:06 430<html> <head> <t ... -
js记录用户名密码 COOKIE
2015-06-02 10:43 829记录COOKIE后，当取消复选框时 发现无法删除COOKIE。 ... -
获取系统当前时间 适合用于头部
2015-05-26 16:26 446<!DOCTYPE HTML PUBLIC " ... -
JS 将字符串转换成日期类型
2015-05-22 14:52 658JS 将字符串转换成日期类型 2013-06-19 17:48 ... -
JS函数中带与不带括号的区别
2015-05-21 18:16 452JS函数中带与不带括号的区别 其实总结起来如下： 函数只要是要 ... -
JS 字符串长度判断
2015-05-20 10:08 1680content.replaceAll("(\r\n| ... -
js开发遇到在方法中调用另一方法问题
2015-05-19 18:03 520/eas_crm_dayi/WebContent/ecp/pa ...
相关推荐
"html网页js打开文件对话框带预览框.JS实现文件上传前先本地预览功能"这一主题主要关注如何利用JavaScript来实现在用户选择文件后，即刻在页面上进行预览，特别是对于图片文件的处理。以下将详细介绍这个过程及其...
在图片上传中，JS通常用于处理用户选择文件后在本地预览图片，验证文件类型和大小，以及提供一个友好的用户体验，如进度条显示上传进度。 1. **图片预览**：使用HTML5的FileReader API，开发者可以读取用户选择的...
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
在用户上传图片之前提供预览功能，能够提升用户体验，让用户在正式提交前确认图片效果。本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能，结合jQuery库来增强前端交互。 首先，我们要理解JSP（Java...
在JavaScript中，本地图片的预览和上传到服务器是一个常见的需求，特别是在Web应用中，比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能，提供了源码和工具来帮助开发者轻松实现这一过程。...
在IT领域，尤其是在Web开发中，用户界面的交互性至关重要，而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片，提高了上传过程的可控性和便捷性...
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
在现代Web开发中，用户...总的来说，通过`URL.createObjectURL()`，我们可以方便地在用户选择图片后实现本地预览，提升上传图片的功能体验。结合其他前端技术，如Ajax异步上传，可以构建出更高效、友好的图片上传系统。
在JavaScript中，实现图片上传前的本地预览是一项常见的需求，尤其在网页表单或社交媒体应用中。这个功能允许用户在正式提交之前查看所选图片的效果，提高用户体验。本篇文章将详细探讨如何利用JavaScript实现这一...
在HTML5中，zyUpload利用FileReader API来实现本地图片的预览。FileReader接口允许Web应用程序异步读取存储在用户设备上的文件（或原始数据缓冲区）。用户选择图片文件后，FileReader会读取该文件，并通过`...
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型...
在本项目中，"图片上传，html页面，本地预览，后台前台页面代码都有" 提供了一个完整的解决方案，包括前端用户界面和后端服务。 首先，我们来看前端部分。前端页面通常使用HTML配合JavaScript（JS）来实现用户交互...
总的来说，HTML5的File API、Canvas和Data URL提供了强大的本地文件处理能力，使得在浏览器端生成图片缩略图预览成为可能，大大提升了图片上传功能的用户体验。在实际开发中，我们还需要考虑性能优化、兼容性处理...
在本项目中，我们将探讨如何使用JavaScript（JS）与Koa2框架来构建一个支持文件上传、下载和预览功能的简易应用。这个项目特别适合初学者，因为它的实现过程清晰明了，易于理解。 首先，Koa2是Node.js平台上的一个...
HTML5在图片上传功能上引入了新的...综上所述，HTML5的File API和jQuery结合使用，可以实现图片上传前的本地预览功能，提高了用户交互的便捷性和安全性。在实际开发中，还需要考虑兼容性、性能优化以及可能的安全风险。
总结来说，"jquery图片上传前预览 无需上传至服务器"这一技术方案利用了jQuery、HTML5的File API和Canvas等技术，实现了图片的本地预览和剪切，提高了用户交互的便捷性和效率，同时也减轻了服务器的压力。...
在本主题中，我们将深入探讨如何实现"上传文件前，本地预览图片功能，支持所有主流浏览器"。 首先，我们需要了解这个功能的核心技术——HTML5的File API。File API提供了在浏览器中读取、操作和处理文件的能力，这...