.net 上传图片预览

最新推荐文章于 2024-09-09 12:05:08 发布

最新推荐文章于 2024-09-09 12:05:08 发布 · 84 阅读

文章标签：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePicture.aspx.cs" Inherits="SelfServiceSystem.UpdatePicture" %>

<!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>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function DrawImage(ImgD) {
var preW = 300;
var preH = 400;
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
flag = true;
if (image.width / image.height >= preW / preH) {
if (image.width > preW) {
ImgD.width = preW;
ImgD.height = (image.height * preW) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
else {
if (image.height > preH) {
ImgD.height = preH;
ImgD.width = (image.width * preH) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
}

}

function FileChange(Value) {
flag = false;
document.getElementById("uploadimage").width = 100;
document.getElementById("uploadimage").height = 100;
document.getElementById("uploadimage").alt = "";
document.getElementById("uploadimage").src = Value;

var extStart = Value.lastIndexOf(".");
var ext = Value.substring(extStart, Value.length).toUpperCase();

}

function PreviewImg(imgFile) {

flag = false;
document.getElementById("uploadimage").width = 100;
document.getElementById("uploadimage").height = 100;
document.getElementById("uploadimage").alt = "";
document.getElementById("uploadimage").src = AutoResizeImage(300,600,imgFile.value);
}
$(function () {
var ei = $("#large");
ei.hide();
$("#uploadimage").mousemove(function (e) {
ei.css({ top: e.pageY, left: e.pageX }).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout(function () {
ei.hide("slow");
})
$("#FileUpload1").change(function () {
$("#uploadimage").attr("src", "file:///" + $("#FileUpload1").val());
})
});
</script>
</head>
<body>

<form id="form1" runat="server">
<div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<input type="file" size="30" name="picaddress" onChange="javascript:FileChange(this.value);">
<br />
<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
<br><IMG id="uploadimage" height=0 width=0 src="" onload="javascript:DrawImage(this);" >
<br />

<div id="newPreview"></div>
<div id="large"></div>
</div>

</form>
</body>
</html>