<%@ Page Language="C#" AutoEventWireup="true" %>
<!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>
<link rel="Stylesheet" href="../CSS/StyleSheet.css" type="text/css" />
<style type="text/css">
body{ background-color:#f3ffe3; font-size:13px;}
#tbSetInfo td {height:30px;}
.mustget{color:Red;}
#preview_wrapper{display:inline-block;width:142px;height:90px;}
#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:142px;height:90px;}
/*Img--2*/
#preview_wrapper2{display:inline-block;width:142px;height:90px;}
#preview_fake2{
/* 该对象用于在IE下显示预览图片
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
#preview_size_fake2{
/* 该对象只用来在IE下获得图片的原始尺寸,无其它用途
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);visibility:hidden;}
#preview2{
/* 该对象用于在FF下显示预览图片
*/
width:142px;height:90px;}
</style>
<script type="text/javascript">
function GetfileValue(sender){
if( !sender.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('图片格式无效!');
return false;
}
//判断浏览器类型
var isIE = (document.all) ? true : false;
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
var isIE6 = isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);
var file=document.getElementById("FileUploadAcceptSample");
if(isIE8){
onAcceptChange(sender);
}else if(isIE7)
{
file.select();
var path=document.selection.createRange().text;
document.selection.empty();
document.getElementById("preview").src=path;
}else if(isIE6){
document.getElementById("preview").src=document.getElementById("FileUploadAcceptSample").value;
}else{ //火狐
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e) {
alert('请更改浏览器设置');
return;
}
var fname = document.getElementById("FileUploadAcceptSample").value;
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
try {
// Back slashes for windows
file.initWithPath( fname.replace(/\//g, "\\\\") );
}
catch(e) {
if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
alert('无法加载文件');
return;
}
// alert(file.path); //取得文件路径
document.getElementById("preview").src=file.path;
}
}
function GetfileValue2(sender){
if( !sender.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('图片格式无效!');
return false;
}
//判断浏览器类型
var isIE = (document.all) ? true : false;
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
var isIE6 = isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);
var file=document.getElementById("FileUploadSamplePoint");
if(isIE8){
onUploadChange(sender);
}else if(isIE7)
{
file.select();
var path=document.selection.createRange().text;
document.selection.empty();
document.getElementById("preview2").src=path;
}else if(isIE6){
document.getElementById("preview2").src=document.getElementById("FileUploadSamplePoint").value;
}else{ //火狐
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e) {
alert('请更改浏览器设置');
return;
}
var fname = document.getElementById("FileUploadSamplePoint").value;
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
try {
// Back slashes for windows
file.initWithPath( fname.replace(/\//g, "\\\\") );
}
catch(e) {
if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
alert('无法加载文件');
return;
}
// alert(file.path); //取得文件路径
document.getElementById("preview2").src=file.path;
}
}
</script>
<script type="text/javascript">
function onUploadChange(sender){
var objPreview = document.getElementById('preview2' );
var objPreviewFake = document.getElementById('preview_fake2' );
var objPreviewSizeFake = document.getElementById('preview_size_fake2' );
if( sender.files &&sender.files[0] ){
objPreview.style.display ='block';
objPreview.style.width ='auto';
objPreview.style.height ='auto';
// Firefox 因安全性问题已无法直接通过input[file].value
objPreview.src =sender.files[0].getAsDataURL();
}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 onAcceptChange(sender){
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
objPreview.src =sender.files[0].getAsDataURL();
}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 onPreviewLoad2(sender)
{autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}
function onPreviewLoad(sender)
{autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}
function autoSizePreview( objPre, originalWidth, originalHeight){
var zoomParam = clacImgZoomParam( 150, 105, 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>
<form id="form1" runat="server">
<div id="divbox"></div>
<div style=" width:100%;">
<table cellpadding="0" cellspacing="0" border="0" width="870px" id="tbSetInfo" >
<tr>
<td align="center">可接受的取样点</td>
<td colspan="3">
<asp:TextBox ID="txtAcceptSamolePoint" runat="server" TextMode="MultiLine"
Width="324px"></asp:TextBox>
</td>
<td rowspan="4" colspan="2">
<div id="preview_wrapper" style="padding-left:25px;">
<div id="preview_fake">
<span>可接受的取样点</span><br />
<span>
<img id="preview" alt="" title="可接受的取样点(图片说明)" runat="server" />
<%--<asp:Image ID="Image1" runat="server" ToolTip="可接受的取样点(图片说明)" />--%>
<img ID="preview_size_fake" />
</span>
</div>
</div>
</td>
<td rowspan="4" colspan="2" >
<div id="preview_wrapper2">
<div id="preview_fake2">
<span>推荐的取样点</span><br />
<span>
<img id="preview2" alt="" title="推荐的取样点(图片说明)" runat="server" />
<%--<asp:Image ID="preview2" runat="server" οnlοad="onPreviewLoad2(this)" ToolTip="推荐的取样点(图片说明)" />--%>
<img id="preview_size_fake2"/>
</span>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">可接受的取样点的图片说明</td>
<td colspan="3">
<asp:FileUpload ID="FileUploadAcceptSample" runat="server" οnchange="GetfileValue(this)" />
</td>
</tr>
<tr>
<td align="center" >推荐的取样点</td>
<td colspan="4">
<asp:TextBox ID="txtRecomSamplepoint" runat="server" Width="324px"
TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">推荐的取样点的图片说明</td>
<td colspan="3">
<asp:FileUpload ID="FileUploadSamplePoint" runat="server" οnchange="GetfileValue2(this)" />
</td>
</tr>
<tr>
<td align="center">备注</td>
<td colspan="7">
<asp:TextBox ID="txtRemark" runat="server" TextMode="MultiLine" Width="324px"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
原文:http://hi.baidu.com/duwang1104/blog/item/12fd914a6a89db3308f7ef7a.html