asp.net使用jquery.form实现图片异步上传

首先我们需要做准备工作:

jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar

jquery.form.js下载:http://files.cnblogs.com/tianguook/jquery.form.js

页面JqueryFormTest.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits="JqueryFormTest" %>

<!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.8.0.js" type="text/javascript"></script>
    <script src="JS/jquery.form.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $("#fm1").ajaxSubmit({
                    url: "img.ashx",
                    type: "post",
                    success: function (data) {
                        alert(data);
                        //IE显示图片会默认加上<PRE></PRE>,着必须要把去除掉才能在低版本ie显示  
                        data = data.replace("<PRE>", "").replace("</PRE>", "");
                        $("#divimg").append("<img src='" + data + "' width='200px' height='200px'/>");
                        //清空file控件里面的值  
                        var file = $("#btnfile");
                        file.after(file.clone().val(""));
                        file.remove();
                    }
                });
            });
        })  
    </script>
</head>
<body>
    <form id="fm1" method="post">
    <!--method="post"不能省略,在ie里面必不可少-->
    <input type="file" id="btnfile" name="btnfile" value="提交" />
    <br />
    <input type="button" id="btn" value="上传" />
    </form>
    <div id="divimg">
        
    </div>
</body>
</html>

img.ashx:

<%@ WebHandler Language="C#" Class="img" %>

using System;
using System.Web;

public class img : IHttpHandler {   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //获取上传的文件的对象  
        HttpPostedFile img = context.Request.Files["btnfile"];

        //获取上传文件的名称  
        string s = img.FileName;
        //截取获得上传文件的名称(ie上传会把绝对路径也连带上,这里只得到文件的名称)  
        string str = s.Substring(s.LastIndexOf("\\") + 1);  
        string path = "~/upload/"+ str;
        //保存文件  
        img.SaveAs(context.Server.MapPath(path));
        //HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称,因为响应给页面时不会自动添加而导致无法显示图片
        context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用来去除第一个~字符
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

你可能感兴趣的:(asp.net)