C#实现图片上传与浏览切换的方法
程序员文章站
2023-12-22 10:19:52
本文以一个完整实例讲述了c#实现图片上传与浏览切换的方法，对于进行c#程序设计来说具有一定的借鉴价值。分享给大家供大家参考。
具体实现代码如下：
<%@...
本文以一个完整实例讲述了c#实现图片上传与浏览切换的方法，对于进行c#程序设计来说具有一定的借鉴价值。分享给大家供大家参考。
具体实现代码如下：
<%@ page language="c#" autoeventwireup="true" codefile="default3.aspx.cs" inherits="default3" %>
<!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>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.upic').change(function() {
var filename = $(this).val().replace(/.*(\/|\\)/, ""); //文件名
var fileext = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.tolowercase()) : ''; //后缀名
if (fileext != "jpeg" && fileext != "jpg" && fileext != "gif" && fileext != "png") {
alert('请选择一个jpg或gif的图片文件');
return;
};
$(this).parent().parent().parent().addclass('support');
if ($.browser.msie) {
if ($.browser.version == "6.0") {
$(this).parent().parent().siblings(".preview").html('<img style="height:auto;width:88px;" src="' + $(this).val() + '"/>');
} else {
var previewdiv = $(this).parent().parent().siblings(".preview");
previewdiv.css({ filter: "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=image)" });
previewdiv[0].filters.item("dximagetransform.microsoft.alphaimageloader").sizingmethod = "scale";
try {
previewdiv[0].filters.item('dximagetransform.microsoft.alphaimageloader').src = getpath($(this)[0]);
}
catch (e) {
alert(e.name + ": " + e.message);
alert("无效的图片文件！");
return;
}
}
}
else {
//var data=$(this)[0].files.item(0).getasdataurl();
var data = window.url.createobjecturl($(this)[0].files[0]);
$(this).parent().parent().siblings(".preview").html('<img style="height:auto;width:88px;" src="' + data + '"/>');
return;
}
$(this).parent().parent().parent().mouseover(function() { $(this).addclass('hover'); }).mouseout(function() { $(this).removeclass('hover'); });
});
$('.del').click(function() {
$(this).parent().siblings("[name='isdel']").val("1");
var file = $(this).parent().siblings(".upload").children().children(".upic");
file.after(file.clone(true).val("")).remove();
$(this).parent().siblings(".preview").after('<div class="preview"></div>').remove();
//$(this).parent().siblings(".preview").empty();
$(this).parent().parent().removeclass('support').mouseout().unbind('mouseover');
});
if ($.browser.msie) {
$('#memberphoto').filter('.support').mouseover(function() { $(this).addclass('hover'); }).mouseout(function() { $(this).removeclass('hover'); });
};
//获得上传控件的值，obj为上传控件对象
function getpath(obj) {
if (obj) {
if (window.navigator.useragent.indexof("msie") >= 1) {
obj.select();
document.getelementbyid("btnsave").focus(); //hack for ie9下，如果file控件获得焦点，则document.selection.createrange()拒绝访问
return document.selection.createrange().text;
}
else if (window.navigator.useragent.indexof("firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getasdataurl();
}
return obj.value;
}
return obj.value;
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="pic">
<div id="memberphoto" style="position: relative">
<%if (!string.isnullorempty(imagepath))
{%>
<div class="preview">
<img src="../<%=imagepath%>" style="height: auto; width: 88px;" /></div>
<%}
else
{%>
<div class="preview">
</div>
<%}%>
<div class="upload">
<a class="a-sc" href="javascript:;">
<input id="imageupload" class="upic" type="file" name="upic" runat="server" />
</a>
</div>
<div class="act">
<span class="del">删除</span>
</div>
</div>
</div>
</form>
</body>
</html>
public partial class default3 : system.web.ui.page
{
public string imagepath = "";
protected void page_load(object sender, eventargs e)
{
}
}
希望本文实例对大家的c#程序设计有所帮助。