图片上传浏览切换

最新推荐文章于 2024-04-25 17:05:28 发布

Top_小鑫

最新推荐文章于 2024-04-25 17:05:28 发布

阅读量954

点赞数

文章标签： asp.net .net string 图片控件

本文链接：https://blog.csdn.net/Top_xin/article/details/38778265

版权

<%@ 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)
    {
       
    }
}

Top_小鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传浏览切换

无标题页 $(document).ready(function() { $('.upic').change(function() { var filename = $(this).val().replace(/.*(\/|\\)/, ""); //文件名 va
复制链接

扫一扫