<!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 imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
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>
分享到：
相关推荐
在JavaScript开发中，图片上传预览效果是一种常见的需求，它允许用户在正式上传图片之前查看其效果，确保图片质量和方向正确。本知识点将围绕“js图片上传预览效果”这一主题，结合提供的文件名列表，深入讲解实现这...
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
"JS上传图片预览技术" 在Web开发中，上传图片预览...JS上传图片预览技术是通过 HTML、CSS 和 JavaScript 实现的，该技术可以跨浏览器实现图片上传预览功能，並且能够自动调整图片的尺寸以适应不同的浏览器和屏幕尺寸。
"html+javascript头像上传预览"是利用HTML和JavaScript技术实现的一种交互方式，它允许用户在提交头像之前预览选定的图片，提供更好的用户体验。在此过程中，CSS可能用于美化和定制预览效果，例如将头像显示为圆形。...
【纯 js 实现得 图片上传预览插件】 在前端开发中，图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且...
#### 一、JS 实现图片上传预览功能 **知识点概述：** 本案例展示了如何利用JavaScript实现用户在选择图片后立即预览的效果。这对于需要即时反馈的应用场景非常有用，比如社交媒体头像上传、产品图片上传等。 **...
"基于js的上传预览实现"是一个重要的功能，它允许用户在实际提交文件到服务器之前，在前端页面上预览即将上传的内容。这个功能提高了用户体验，因为用户可以即时看到文件的效果，而无需等待服务器的反馈。下面我们将...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤，理解并掌握这些知识点，可以构建出稳定且用户体验良好的图片上传预览功能。
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
在JavaScript中实现图片上传预览是一项常见的前端功能，它允许用户在正式上传之前查看选定的图片，提升用户体验。这项技术主要涉及到HTML、CSS以及JavaScript，尤其是利用File API和Canvas元素来实现。以下是对这一...
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
"Flash+JS可预览图片批量上传"的实现方式结合了两种技术，为用户提供了一个方便、高效的文件上传体验。在这个解决方案中，Flash作为前端交互层，用于处理图片预览和多文件选择，而JavaScript则用于提供页面动态交互...
在"Jquery-JS图片上传预览"这个主题中，我们将探讨如何利用这两个库来创建一个跨浏览器的图片预览功能，包括对火狐、谷歌和IE等主流浏览器的支持。 首先，我们需要在HTML页面中添加一个`<input>`元素，类型设置为`...
在JavaScript中实现图片上传预览是一项常见的前端功能，它允许用户在正式上传图片到服务器之前先看到图片的效果，提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片（如尺寸调整）以及在...
在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...
在IT行业中，图片上传预览是一项常见的功能，特别是在网页应用和移动应用中。这个插件的标题"图片上传预览效果，很小的一个插件"表明它是一个轻量级的解决方案，专为实现快速、便捷的图片预览而设计。描述中提到...
这个项目以"PHP+js 上传视频、预览、缩略图、视频时长"为主题，显然是一个利用PHP和JavaScript技术实现的Web应用实例，主要应用于用户交互和多媒体处理。下面我们将详细探讨这些知识点。 1. **PHP上传视频**： PHP...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
在这个场景下，"无需后台交互的上传预览JS插件Demo"提供了一种解决方案，它允许用户在选择文件后即时预览，而不需要等待服务器的反馈。这个Demo主要依赖于JavaScript的File API，这是一种现代浏览器提供的本地文件...