转自：http://blog.163.com/huangcheng71@126/blog/static/347393552011111516226/
<!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=gb2312" />
<title>图片上传预览 ie6,7,8, firefox</title>
<script type="text/javascript" language="javascript">
function checkPic() {
var picPath = document.getElementById("picPath").value;
var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase();
if (type != "jpg" && type != "bmp" && type != "gif" && type != "png") {
alert("请上传正确的图片格式");
return false;
}
return true;
}
//图片预览
function PreviewImage(divImage, upload, width, height) {
if (checkPic()) {
try {
var imgPath; //图片路径
var Browser_Agent = navigator.userAgent;
//判断浏览器的类型
if (Browser_Agent.indexOf("Firefox") != -1) {
//火狐浏览器
//getAsDataURL在Firefox7.0 无法预览本地图片，这里需要修改
imgPath = upload.files[0].getAsDataURL();
document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>";
} else {
//IE浏览器 ie9 必须在兼容模式下才能显示预览图片
var Preview = document.getElementById(divImage);
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = width;
Preview.style.height = height;
}
} catch (e) {
alert("请上传正确的图片格式");
}
}
}
</script>
</head>
<body>
<input type="file" id="picPath" name="doc" onchange="PreviewImage('Preview',this,120,120);" />
<div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
</div>
</body>
</html>
分享到：
相关推荐
【wangEditor上传图片 demo】是一个基于wangEditor富文本编辑器的图片上传功能示例，它展示了如何在前端使用wangEditor并结合后端Java代码实现图片的上传与展示。这个demo适用于那些想要在Web应用中集成图片上传功能...
本示例项目"Android 仿微信选择图片，上传图片"旨在帮助开发者实现类似的功能，让用户可以从手机相册中选取图片，并能上传到服务器。下面我们将详细探讨这一过程中的关键知识点。 1. **权限申请**： 在Android 6.0...
"jQuery批量上传图片插件"是基于jQuery实现的一种功能，旨在为网页应用提供便捷的图片批量上传功能。这个插件通常利用Ajax技术实现异步上传，即在不刷新页面的情况下，用户可以选择多张图片并将其上传到服务器，大大...
通过以上步骤，我们可以创建一个ASP.NET应用，它允许用户上传图片，并在上传过程中显示进度条。这个功能不仅可以提升用户体验，还能帮助监控上传状态，提高应用的可靠性。在实际开发中，可以根据项目需求进行相应的...
根据提供的标题、描述以及部分代码内容，我们可以总结出以下关于“使用VB.NET上传图片文件”的相关知识点： ### VB.NET上传图片文件概述 在VB.NET中实现文件上传功能时，主要涉及的是通过Web表单（ASP.NET）来处理...
在C# WinForm应用开发中，上传照片到服务器是一个常见的需求，这涉及到客户端与服务器之间的文件传输技术。本文将深入探讨如何实现这个功能，以及如何根据要求修改照片的名字。 首先，我们需要了解C#中的文件操作...
这个"绝对好用的上传文件上传图片vb.net示例"提供了一个基础的实现，它不仅可以处理图片上传，通过调整还能扩展到其他文件类型的上传。下面将详细讲解其中涉及的关键知识点。 1. 文件上传控件：在ASP.NET中，`...
这个"Python实现QQ相册自动上传照片源码"就是一个很好的例子，它利用编程技术实现了无人值守的照片上传功能，对于个人或企业来说，这可以极大地节省时间和精力。 首先，我们要了解这个项目的核心——Python编程语言...
四、上传图片 1. 创建上传方法：在WinForm中，创建一个按钮或菜单项，绑定点击事件。在事件处理函数中，实现图片上传的逻辑。 2. 选择图片：使用OpenFileDialog控件让用户选择要上传的图片文件。 3. 转换为Byte数组...
- 权限控制：确保只有授权用户能访问和上传图片，例如使用JWT令牌进行身份验证。 - 文件权限：设置正确的文件系统权限，防止非法访问。 - CDN加速：使用内容分发网络（CDN）可以提高图片加载速度，同时分散服务器...
在IT行业中，批量上传图片是一项常见的需求，尤其是在社交媒体、个人相册、云存储服务等应用场景中。QQ相册作为一款广泛使用的社交应用，其照片上传功能具有用户友好的特点，支持用户快速方便地分享自己的照片。这个...
【标题】"ueditor上传图片配置"涉及到的是在SpringBoot框架下集成并配置ueditor，以便实现用户在编辑器中上传图片的功能。ueditor是一款流行的富文本编辑器，它提供了丰富的在线编辑功能，包括文字编辑、图片上传、...
本教程将详细讲解两种实现C# WinForm上传图片的方法，并提供源代码供参考和修改，以适应不同类型的文件上传需求。 方法一：使用OpenFileDialog控件 OpenFileDialog是.NET Framework提供的一个内置控件，它允许用户...
2. **图片裁剪**：为了保持上传图片的质量和一致性，通常会提供图片裁剪功能。Android SDK提供了`Crop Intent`，也可以使用第三方库如`UCrop`进行更高级的裁剪操作。 3. **图片压缩**：为减少网络传输时间和节省...
在这个"上传图片不乱码demo"中，开发者已经解决了图片上传过程中的乱码问题，提供了简单易用的实现方式。下面我们将详细探讨相关的技术点。 1. **文件上传原理**：文件上传是通过HTTP协议的POST请求来完成的。在...
首先，让我们从AJAX上传图片开始。AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在图片上传场景中，AJAX可以提供无刷新的用户体验，使得用户在上...
在描述中提到的"自定义上传图片插件"，可能是对TinyMCE原有图片上传功能的增强或替换。这个插件可能包含了以下关键部分： 1. **上传接口**：自定义插件需要实现一个图片上传接口，通常是通过发送HTTP请求到服务器端...
标题“上传图片 图片上传”直指这个核心操作，而描述中的“上传图片同时支持post参数，也支持上传其他类型文件【需修改对应参数】”揭示了实现这一功能时的一些关键技术和注意事项。 首先，我们来探讨图片上传的...
这个"网页上传照片demo"应该是一个示例项目，旨在展示如何在网站上实现用户上传图片的功能。以下是对这个主题的详细解释： 1. **HTML表单**：上传照片的基础是HTML的`<form>`元素，特别是`<input type="file">`标签...
在H5技术中，上传图片是一项常见的功能，广泛应用于网页、移动端应用以及各种在线服务中。这个"上传图片例子 H5"很可能是提供了一个演示如何在HTML5环境下实现图片上传的示例代码或教程。H5是HTML5的简称，是超文本...