ASP.NET利用JQuery自动上传图片

记得去年的时候，我在做上传图片是就遇到了一个问题，当时还在博客园的博问中提问过（http://q.cnblogs.com/q/28119/），最终我选择了使用Uploadify解决当时的问题。前几天在做上传图片时，想选择图片之后立即上传，自然而然想到了使用JQuery，但是又遇到了去年遇到的那个问题，这种情况还是需要提交表单才行。前天看到园子的一位朋友写的ASP.NET工作笔记之一：图片上传预览及无刷新上传，今天我也专门写了一个例子，欢迎批评指正。

DEMO的结构

下面看看UploadImage.aspx页面里的代码：

HTML代码：

<form id="form1" runat="server">
   <div id="upload">
       <input type="file" id="uploadImage" name="uploadImage" />
   </div>
   <div id="preview">
       <img id="previewImage" src="images/nopic.jpg" alt="暂无图片" />
   </div>
</form>

CSS代码：

        #upload
        {
            height: 25px;
        }
        #upload input
        {
            float: left;
            margin: 0 20px 0 0;
        }
        #upload img
        {
            width: 25px;
            height: 25px;
            float: left;
        }
        #preview
        {
            width: 300px;
            margin: 10px 0 0 0;
        }
        #preview img
        {
            width: 300px;
            height: 260px;
        }

JS代码：

首先引用下面的JS文件：

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>

 

   $(function () {
            var wait = $("<img src=\"images/wait.gif\" alt=\"正在上传\"/>");
            $("#uploadImage").change(function () {
                $("#form1").ajaxSubmit({
                    url: 'UploadImage.ashx',
                    beforeSubmit: function () {
                        $("#upload").append(wait);
                        $("#upload img").css("display", "inline");
                    },
                    success: function (data) {
                        $("#upload img").fadeOut(2000);
                        if (data != "上传失败") {
                            $("#previewImage").attr("src", "uploadimages/" + data).hide().fadeIn(2000);
                        }
                        else {
                            alert("上传失败");
                        }
                    }
                });
            });
        });

UploadImage.ashx文件的代码如下：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    HttpPostedFile file = context.Request.Files[0];
    if (file != null)
    {
        try
        {
            //图片保存的文件夹路径
            string path = context.Server.MapPath("~/uploadimages/");
            //每天上传的图片一个文件夹
            string folder = DateTime.Now.ToString("yyyyMMdd");
            //如果文件夹不存在，则创建
            if (!Directory.Exists(path + folder))
            {
                Directory.CreateDirectory(path + folder);
            }
            //上传图片的扩展名
            string type = file.FileName.Substring(file.FileName.LastIndexOf('.'));
            //保存图片的文件名
            string saveName = Guid.NewGuid().ToString() + type;
            //保存图片
            file.SaveAs(path + folder + "/" + saveName);
            context.Response.Write(folder + "/" + saveName);
        }
        catch
        {
            context.Response.Write("上传失败");
        }
    }
}

最后程序运行的效果如下图所示：

未上传图片

上传后

以上代码我在谷歌和FF中测试没有问题，在IE9下会出现下面的问题：

查看问题出现在哪，启动IE9的开发人员工具进行调试，通过调试可以发现IE9在返回的data前后分别加了<pre>和</pre>

这样的话，就需要修改一下JS代码，如果是IE9的话，就将<pre></pre>替换掉。

success: function (data) {
    $("#upload img").fadeOut(2000);
    if (data != "上传失败") {
        if ($.browser.msie) {
            data = data.replace("<pre>", "").replace("</pre>", "");
        }
        $("#previewImage").attr("src", "uploadimages/" + data).hide().fadeIn(2000);
    }
    else {
        alert("上传失败");
    }
}

上面的代码只在IE9下测试，其他版本的，感兴趣的朋友可以自己测试。

在线测试地址：http://www.tnmblogs.com/Demo/UploadImage.aspx