一个投机取巧的上传图片前预览

最近一直在找BS端的图片上传前进行预览，试了WebUploader，浏览器兼容性挺好，但是，，，在IE浏览器的兼容模式下，就不能用了，所以排除了，而且，不清楚怎么获取图片的原本宽高，以后再看看吧。。。

至于其他的，说是做浏览器兼容，然而，，，百度了好多方法都不能用，心很累，所以，最后，忍无可忍，只能用了一种投机取巧的办法。

首先，在页面里放置一个FileUpload、一个Image、一个Button，这个按钮的点击事件里写如下代码

protected void Button2_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            string LastWenJianJiapath = Server.MapPath("~/Images/Temp/" + DateTime.Now.AddDays(-1).ToString("yyyy年MM月dd日"));//日期为昨天的文件夹
            string WenJianJiapath = Server.MapPath("~/Images/Temp/" + DateTime.Now.ToString("yyyy年MM月dd日"));//日期为今天的文件夹
            if (System.IO.Directory.Exists(LastWenJianJiapath))
            {
                Directory.Delete(LastWenJianJiapath, true);//删除文件夹以及文件夹中的子目录，文件  
            }
            else
            {
                if (Directory.Exists(WenJianJiapath) == false)//如果不存在就创建file文件夹
                {
                    Directory.CreateDirectory(WenJianJiapath);
                }
            }
            string name = Path.GetExtension(FileUpload1.FileName);
            //获取文件信息
            FileInfo file = new FileInfo(FileUpload1.PostedFile.FileName);
            ///随机数据
            Guid guid = Guid.NewGuid();
            string stamp = guid.ToString("N");
            //生成随机数
            Random aa = new Random();
            string number = aa.Next(10000).ToString();
            //原始图片保存路径
            string path = "~/Images/Temp/" + DateTime.Now.ToString("yyyy年MM月dd日") + "/" + stamp + name;
            //原始图片保存
            FileUpload1.SaveAs(Server.MapPath(path));
            Image1.ImageUrl = path;
        }
    }

这个点击事件，是在用户选择了图片后，点击一下按钮，然后将选中的图片保存下来，再将路径放入Image中显示出来，然而这个多了一个点击按钮后显示图片的步骤，我的解决办法是，将这个按钮隐藏，在FileUpload中写onchange事件，当file控件中的文件发生改变时， 用JS模拟按钮的点击。

具体代码为

<asp:FileUpload ID="FileUpload1"  runat="server"  Height="40"  οnchange="SetImg()"  Width="240px" />

function SetImg() {
            var patn = /\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$/i;
            var x = document.getElementById("FileUpload1").value;
            if (patn.test(x)) {
                document.getElementById("Button2").click();
            }
            else {
                document.getElementById("FileUpload1").value = "";
                alert('请选择后缀为jpg、jpeg、png、bmp或gif的图片');
            }
        }

<asp:Button  ID="Button2"  CssClass="btnShow"  runat="server"   OnClick="Button2_Click" />

        .btnShow
        {
            display:none;
            }

现在，上传图片前预览这个功能已经实现了，下来实现上传功能，其实上传已经实现了，就在点击预览的时候，将图片已经保存在服务器上了，那么Image控件里的Url，就是用户所需要上传的图片了。

可以看到，在点击预览事件中，做了对文件夹的判断删除，点击时，删错昨天的文件夹，然后判断今天的文件夹是否建立，这是因为我做的是注册页面，用户真正注册完成前，是无法根据唯一标识符来区别图片，所以就通过这种删除昨天的文件夹来减少服务器上的图片数量，虽然可能会出现遗漏（即中间有一天没有一个人注册或者选择图片），但是这个应该很少吧。

下来还有个问题，就是在小屏幕上时，如果这个上传图片放的很靠下，触发点击事件后，页面就跑到最上面去了。

我的处理方法是，放一个隐藏域HiddenField，里面存放一个数字0，首先我们知道，这个点击事件触发后，造成了页面回发，那就在后台的PageLoad事件中进行判断，然而很搞笑的是，往往我们在PageLoad判断的是!IsPostBack（页面首次加载），然而这时候我们要判断的是IsPostBack，即当页面回发时，给隐藏域中赋值1。

下来再用JQuery做监听，如下

$(document).ready(function () {
            if ($("#HiddenField1").val() == "1") {
                $("#Button1").focus();
            }
        });

当隐藏域里的值为1 时，将光标聚焦在注册按钮上，这样一来，电脑屏幕小的也不会因为页面的刷新导致页面回到最上方。

虽然这个方法非常简陋，但是最起码实现功能了不是，而且没有兼容性的问题了。。。(⊙﹏⊙)b自我安慰。。。

希望看了这篇文章的各位能留下宝贵的意见，指正我的不足，能帮我完善下最好O(∩_∩)O哈哈~！！！