如何对本地上传图片进行预览（不发送至服务器）

来源：广州中睿信息技术有限公司

发布时间：2012/10/21 23:25:16 编辑：itlead 阅读 1986 次

　　用在什么地方呢？我想，你能找到这篇文章，你应该比我清楚（当然是所需要用的地方喽！哈哈）

　　
　　不多说了，先上预览，省的来研究代码，有时你不需要明白太多，只要能用即可。是你要的，拿走；不是你要的，就当路过啦！

　　图片一：上传界面（你懂得，这也忒简陋啦！）

　　

　　图片二：点击浏览之后选好图片

　

　　你惊喜地发现，这就是你要的！哈哈

　　不多说了，献上代码！

　　<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> 　　<!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 runat="server"> 　　<title>上传图片本地进行预览¤¨¤</title> 　　</head> 　　<body> 　　<p><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></p> 　　<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"> 　　<script> 　　function setImagePreview() { 　　vardocObj = document.getElementById("doc"); 　　varfileName = docObj.value; 　　varimgObjPreview = 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(); 　　varimgSrc = document.selection.createRange().text; 　　varlocalImagId = 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>

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。