<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">#preview_wrapper{ display:inline-block; width:100px; height:100px; background-color:#CCC; } #preview_fake{ /* 该对象用户在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility:hidden; } #preview{ /* 该对象用户在FF下显示预览图片 */ width:100px; height:100px; }</style>
<script type="text/javascript">function onUploadImgChange(sender) {
if (!sender.value.match(/.jpg|.jpeg|.png/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]) {
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
if (window.createObjectURL != undefined) { // basic
objPreview.src = window.createObjectURL(sender.files[0]);
} else if (window.URL != undefined) { // mozilla(firefox)
objPreview.src = window.URL.createObjectURL(sender.files[0]);
} else if (window.webkitURL != undefined) { // webkit or chrome
objPreview.src = window.webkitURL.createObjectURL(sender.files[0]);
}
} else if (objPreviewFake.filters) {
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
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(100, 100, 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>
</head>
<body>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)" /></div>
</div>
<br/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this)" />
<br/>
<img id="preview_size_fake" />
</body>
</html>
分享到:
相关推荐
### 如何将input type=file显示的“浏览”变成英文的 在网页开发中,经常会遇到需要用户上传文件的情况。默认情况下,HTML中的`<input type="file">`元素的“浏览”按钮通常会显示为系统语言,对于英文界面的需求,...
本文将深入探讨如何使用 `input type="file"` 激活手机的照相机功能以及选择图片上传。 首先,`<input type="file">` 是HTML中的一个表单元素,它的主要作用是让用户选择本地文件。在默认情况下,点击这个元素会...
HTML5 中的 input type=file 元素支持多图上传、上传前预览、二进制上传等功能,取代了 swfupload.js 的作用。现在,很流行的一种处理方式,就是 HTML5 文件上传和 flash swfupload 上传一起整合的模式,优先使用...
本篇文章将详细讲解如何将`<input type="file">` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...
总的来说,`<input type="file">` 结合 `FileReader API` 可以实现用户在选择图片后的即时预览,这在现代Web开发中是一个常用且实用的技术,提高了用户的交互体验。理解并掌握这一技术,对于提升网页的交互性和专业...
然而,在实际使用中,我们可能会遇到一些问题,比如在WebView中使用`<input type="file">`标签时,用户无法选择本地文件。这个现象主要是由于Android的安全机制和权限控制导致的。本文将详细讲解如何解决这个问题。 ...
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
C#如何使用input[type=file]进行多个图片上传(XMLHttpRequest与后台交互) 详情可看:https://blog.csdn.net/weixin_44713389/article/details/90746459
在前端开发中,"input file上传图片预览"是一个常见的需求,它允许用户选择本地的图像文件,并在上传前提供预览。这个功能在许多网站和应用中都很实用,例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
然而,这个特性在早期的Internet Explorer浏览器,尤其是IE7、IE8和IE9版本中并未得到支持。这导致了在这些浏览器上使用`type="number"`时,用户界面可能无法正常显示或功能缺失,从而影响用户体验。为了解决这个...
如果你需要在Android 7.0及以上版本分享文件,需要使用`FileProvider`来避免安全警告。首先在`AndroidManifest.xml`中添加`<provider>`标签,然后在代码中创建文件URI并传递给Webview: ```xml android:name=...
这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器",表明这是一个旨在解决浏览器兼容性问题的解决方案,涵盖了老版本的Internet Explorer(IE6到IE9)以及Firefox、Chrome、Opera...
根据给定文件内容,下面介绍有关于jQuery实现input[type=file]多图预览上传删除功能的知识点。 ### jQuery实现多图上传预览与删除功能 #### 1. 前端界面结构 在实现多图上传预览与删除功能时,首先需要布局一个...
input type=file 选择图片并且实现预览效果的实例 本文将为大家带来一个input type=file 选择图片并且实现预览效果的实例。这个实例使用了HTML、CSS和JavaScript来实现图片上传和预览的功能。 首先,让我们看看...
对于file input按钮,可以通过设置`<input type="file" lang="zh-CN">`来显示中文版本,但遗憾的是,浏览器默认的按钮文本并不会因此改变。 2. **CSS替换文本**:利用CSS的伪元素`::before`和`::after`,我们可以...
通过网络搜索发现是因为 android webview 由于考虑安全原因屏蔽了 input type=”file” 这个功能 。 经过不懈的努力,以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法。 具体可以理解为 重写webview 的...
本文将详细介绍如何使用`ajaxfileupload.js`这个jQuery插件,结合`input[type=file]`元素,实现无刷新的文件上传功能。 首先,`ajaxfileupload.js`是一个基于jQuery的轻量级插件,它允许开发者通过异步方式发送文件...
### 如何使 input type=file 只读并实现文件上传 在网页开发中,有时我们需要让用户选择一个文件但不允许他们更改已选择的文件。这通常是为了防止用户在提交表单前临时更改文件,从而确保文件的一致性和安全性。...
"js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点: 1. **HTML 结构**: 首先,我们需要在HTML页面中创建一个`...
本文将详细介绍如何使用JSP(JavaServer Pages)来实现`input type="file"`标签的图片上传即时预览功能。 首先,我们要理解HTML中的`<input type="file">`标签,它是用来让用户选择本地文件的。当我们设置`<input ...