如何使用ASP.NET Image对象上载图像 [英] How to upload an image using ASP.NET Image object
本文介绍了如何使用ASP.NET Image对象上载图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在asp.net c＃中编写一个代码来压缩图像然后使用服务器上传它。所以我在< img id =1.jpg>中得到一个压缩图像。标记并直接将此文件上传到服务器。请帮我解决这个问题。下面是我的html代码我得到压缩文件到对象名为result_image，并希望这个图像直接上传到服务器上..
我的html代码是： -
I am writing a code in asp.net c# to compress the image first and then upload it using server .. so i am getting a compressed image in a <img id="1.jpg"> tag and directly want to upload this file to server. please help me in solving this issue..below is my code of html i am getting compressed file to object named "result_image" and want this image to directly upload on server..
my html code is:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="" id="source_image" style="height:320px;width:320px;" />
<br /><br />
<img src="" style="height:160px;width:160px;" id="result_image" />
<input type="button" onclick="compress();" value="compress" />
</div>
<input id="uploadInput" type="file" name="myFiles" onchange="readURL(this);" >
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#source_image')
.attr('src', e.target.result)
.width(320)
.height(320);
};
reader.readAsDataURL(input.files[0]);
}
}
function compress() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(0) ;
}
// end of optional code
alert(sOutput);
var compression = (150 / parseInt(sOutput)) * 100;
alert(compression.toFixed(0));
var source_image = document.getElementById('source_image');
var result_image = document.getElementById('result_image');
if (source_image.src == "") {
alert("You must load an image first!");
return false;
}
var quality = parseInt(compression.toFixed(0));
result_image.src = getdata(source_image, quality, "jpg").src;
result_image.onload = function () {
var image_width = $(result_image).width(),
image_height = $(result_image).height();
if (image_width > image_height) {
result_image.style.width = "160px";
} else {
result_image.style.height = "160px";
}
result_image.style.display = "block";
}
}
function getdata(source_img_obj, quality, output_format) {
var mime_type = "image/jpeg";
if (output_format != undefined && output_format == "png") {
mime_type = "image/png";
}
var cvs = document.createElement('canvas');
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality / 100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
}
</script>
</form>
</body>
</html>
推荐答案
（' ＃source_image'）
.attr（' src'，e.target.result）
.width（ 320 ）
.height（ 320 ）;
};
reader.readAsDataURL（input.files [ 0 ]）;
}
}
function compress（）{
var nBytes = 0 ，
oFiles = document .getElementById（ uploadInput）。files，
nFiles = oFiles.length;
for （ var nFileId = 0 ; nFileId< nFiles; nFileId ++）{
nBytes + = oFiles [nFileId] .size;
}
var sOutput = nBytes + bytes;
// 倍数近似值的可选代码
for （ var aMultiples = [ KiB， MiB， GiB， TiB ， PiB， EiB， ZiB ， YiB]，nMultiple = 0 ，nApprox = nBytes / 1024 ; nApprox> 1 ; nApprox / = 1024 ，nMultiple ++）{
sOutput = nApprox.toFixed（ 0 ）;
}
// 可选代码的结尾
alert（sOutput ）;
var compression =（ 150 / parseInt （sOutput））* 100 ;
alert（compression.toFixed（ 0 ））;
var source_image = document .getElementById（' source_image'）;
var result_image = document .getElementById（' result_image'）;
if （source_image.src == ）{
alert（ 您必须先加载图片！ ）;
return false ;
}
var quality = parseInt （compression.toFixed（ 0 ））;
result_image.src = getdata（source_image，quality， jpg).src;
result_image.onload = function （）{
var image_width =
('#source_image') .attr('src', e.target.result) .width(320) .height(320); }; reader.readAsDataURL(input.files[0]); } } function compress() { var nBytes = 0, oFiles = document.getElementById("uploadInput").files, nFiles = oFiles.length; for (var nFileId = 0; nFileId < nFiles; nFileId++) { nBytes += oFiles[nFileId].size; } var sOutput = nBytes + " bytes"; // optional code for multiples approximation for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) { sOutput = nApprox.toFixed(0) ; } // end of optional code alert(sOutput); var compression = (150 / parseInt(sOutput)) * 100; alert(compression.toFixed(0)); var source_image = document.getElementById('source_image'); var result_image = document.getElementById('result_image'); if (source_image.src == "") { alert("You must load an image first!"); return false; } var quality = parseInt(compression.toFixed(0)); result_image.src = getdata(source_image, quality, "jpg").src; result_image.onload = function () { var image_width =
（result_image）.width（），
image_height =
(result_image).width(), image_height =
（result_image）.height（）;
if （image_width> image_height）{
result_image.style.width = 160px;
} else {
result_image.style.height = 160像素;
}
result_image.style.display = block;
}
}
function getdata（source_img_obj，quality，output_format）{
var mime_type = 图像/ JPEG;
if （output_format！= undefined && output_format == png）{
mime_type = < span class =code-string> image / png;
}
var cvs = document 。 createElement（' canvas'）;
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext（ 2d）。drawImage（source_img_obj， 0 ， 0 ）;
var newImageData = cvs.toDataURL（mime_type，quality / 100 ）;
var result_image_obj = new Image（）;
result_image_obj.src = newImageData;
return result_image_obj;
}
< / script >
< / form >
< / body >
< < span class =code-leadattribute> / html >
(result_image).height(); if (image_width > image_height) { result_image.style.width = "160px"; } else { result_image.style.height = "160px"; } result_image.style.display = "block"; } } function getdata(source_img_obj, quality, output_format) { var mime_type = "image/jpeg"; if (output_format != undefined && output_format == "png") { mime_type = "image/png"; } var cvs = document.createElement('canvas'); cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality / 100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; } </script> </form> </body> </html>
这篇关于如何使用ASP.NET Image对象上载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
