.net 上傳圖片預覽

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ 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 />

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

.net 上傳圖片預覽

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support