C#实现图片上传与浏览切换的方法
本文以一个完整实例讲述了C#实现图片上传与浏览切换的方法,对于进行C#程序设计来说具有一定的借鉴价值。分享给大家供大家参考。
具体实现代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default3.aspx.cs"Inherits="Default3"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<scriptsrc="js/jquery-1.7.2.js"type="text/javascript"></script>
<scriptsrc="js/jquery-1.7.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('.upic').change(function(){
varfilename=$(this).val().replace(/.*(\/|\\)/,"");//文件名
varfileExt=(/[.]/.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('<imgstyle="height:auto;width:88px;"src="'+$(this).val()+'"/>');
}else{
varpreviewDiv=$(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{
//vardata=$(this)[0].files.item(0).getAsDataURL();
vardata=window.URL.createObjectURL($(this)[0].files[0]);
$(this).parent().parent().siblings(".preview").html('<imgstyle="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");
varfile=$(this).parent().siblings(".upload").children().children(".upic");
file.after(file.clone(true).val("")).remove();
$(this).parent().siblings(".preview").after('<divclass="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为上传控件对象
functiongetPath(obj){
if(obj){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
document.getElementById("btnSave").focus();//hackforIE9下,如果file控件获得焦点,则document.selection.createRange()拒绝访问
returndocument.selection.createRange().text;
}
elseif(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
returnobj.files.item(0).getAsDataURL();
}
returnobj.value;
}
returnobj.value;
}
}
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="pic">
<divid="memberPhoto"style="position:relative">
<%if(!string.IsNullOrEmpty(imagePath))
{%>
<divclass="preview">
<imgsrc="../<%=imagePath%>"style="height:auto;width:88px;"/></div>
<%}
else
{%>
<divclass="preview">
</div>
<%}%>
<divclass="upload">
<aclass="a-sc"href="javascript:;">
<inputid="imageUpload"class="upic"type="file"name="upic"runat="server"/>
</a>
</div>
<divclass="act">
<spanclass="del">删除</span>
</div>
</div>
</div>
</form>
</body>
</html>
publicpartialclassDefault3:System.Web.UI.Page
{
publicstringimagePath="";
protectedvoidPage_Load(objectsender,EventArgse)
{
}
}
希望本文实例对大家的C#程序设计有所帮助。