C#实现图片上传与浏览切换的方法

前端技术 2023/09/08 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#程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20543

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案