jquery+ajax 文件上传功能(无ifram嵌套)

这两天做项目(MVC3),很多地方都需要使用到文件上传功能,但是采用的方式都是通过submit表单的方式来实现附件的上传的,这样感觉每次都要刷新页面很不爽,所以想来想去还是准备写一个通用的文件上传功能来实现文件上传。

既然决定要做就马上动手,这次我采用的方式是,jquery+ajax来实现文件的上传,这里需要使用一个别人写的js插件:jquery-form.js,相关文档资料地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#api

通过使用上述插件,我可以通过ajax来提交表单,而不会刷新页面。主要使用的方法是 $("#myformID").ajaxSubmit()方法。

好了废话不多说,还是上代码:

首先是展示页面需要做的:分别引入jquery.js,jquery-form.js,还有fileload.js

以下是展示页面代码:

<!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>
    <link href="CSS/Style.css" rel="Stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script src="project/js/jquery.form.js" type="text/javascript"></script>
    <script src="project/js/fileload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            createHtml($("#str"));
        })
    </script>
</head>
<body>
    <div id="str">
        
    </div>
</body>
</html>

 

 

下面是fileload.js代码:

复制代码
function createHtml(obj) {
    var htmstr = [];
    htmstr.push(  "<form id='_fileForm' enctype='multipart/form-data'>");
    htmstr.push(  "<table cellspacing=\"0\" cellpadding=\"3\" style=\"margin:0 auto; margin-top:20px;\">");
    htmstr.push(  "<tr>");
    htmstr.push(  "<td class=\"tdt tdl\">请选择文件:</td>");
    htmstr.push(  "<td class=\"tdt tdl\"><input id=\"loadcontrol\" type=\"file\" name=\"filepath\" id=\"filepath\" /></td>");
    htmstr.push(  "<td class=\"tdt tdl tdr\"><input type=\"button\" onclick=\"fileloadon()\" value=\"上传\"/></td>");
    htmstr.push(  "</tr>");
    htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" colspan='3'style='text-align:center;'><div id=\"msg\">&nbsp;</div></td> </tr>");
    htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" style=\" vertical-align:middle;\">图片预览:</td> <td class=\"tdt tdl tdr\" colspan=\"2\"><div style=\"text-align:center;\"><img src=\"project/Images/NoPhoto.jpg\"/></div></td> </tr>");
    htmstr.push(  "</table>")
    htmstr.push(  "</form>");
    obj.html(htmstr.join(""));
}

function fileloadon() {
    $("#msg").html("");    
    $("img").attr({ "src": "project/Images/processing.gif" });
    $("#_fileForm").submit(function () {   
        $("#_fileForm").ajaxSubmit({
            type: "post",
            url: "project/help.aspx",
            success: function (data1) {
            var remsg = data1.split("|");
            var name = remsg[1].split("\/");
            if (remsg[0] == "1") {
            var type = name[4].substring(name[4].indexOf("."), name[4].length);
            $("#msg").html("文件名:" + name[name.length - 1] + "   ---  " + remsg[2]);
            switch (type) {
                case ".jpg":
                case ".jpeg":
                case ".gif":
                case ".bmp":
                case ".png":
                $("img").attr({ "src": remsg[1] });
                break;
            default:
                $("img").attr({ "src": "project/Images/msg_ok.png" });
                break;
            }
            } else {
                $("#msg").html("文件上传失败:" + remsg[2]);
                $("img").attr({ "src": "project/Images/msg_error.png" });
            }
            },
            error: function (msg) {
                alert("文件上传失败");    
            }
        });
        return false;
    });
    $("#_fileForm").submit();
}
复制代码


在下面是服务页面的代码:

复制代码
 protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            HttpPostedFile postFile = Request.Files[0];
            //开始上传
            string _savedFileResult = UpLoadFile(postFile);
            Response.Write(_savedFileResult);

        }
        catch(Exception ex)
        {
            Response.Write("0|error|上传提交出错");
        }

    }
    public string UpLoadFile(HttpPostedFile str)
    {
        return UpLoadFile(str, "/UpLoadFile/");
    }
    public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
    {
        try
        {
            //获取要保存的文件信息
            string filerealname = httpFile.FileName;
            //获得文件扩展名
            string fileNameExt = System.IO.Path.GetExtension(filerealname);
            if (CheckFileExt(fileNameExt))
            {
                //检查保存的路径 是否有/结尾
                if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

                //按日期归类保存
                string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
                if (true)
                {
                    toFilePath += datePath;
                }

                //物理完整路径                    
                string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

                //检查是否有该路径  没有就创建
                if (!System.IO.Directory.Exists(toFileFullPath))
                {
                    Directory.CreateDirectory(toFileFullPath);
                }

                //得到服务器文件保存路径
                string toFile = Server.MapPath("~" + toFilePath);
                string f_file = getName(filerealname);
                //将文件保存至服务器
                httpFile.SaveAs(toFile + f_file);
                return "1|" + toFilePath + f_file + "|" + "文件上传成功";
            }
            else
            {
                return "0|errorfile|" + "文件不合法";
            }
        }
        catch (Exception e)
        {
            return "0|errorfile|" + "文件上传失败,错误原因:" + e.Message;
        }
    }

    /// <summary>
    /// 获取文件名
    /// </summary>
    /// <param name="fileNamePath"></param>
    /// <returns></returns>
    private string getName(string fileNamePath)
    {
        string[] name = fileNamePath.Split('\\');
        return name[name.Length - 1];
    }
    /// <summary>
    /// 检查是否为合法的上传文件
    /// </summary>
    /// <param name="_fileExt"></param>
    /// <returns></returns>
    private bool CheckFileExt(string _fileExt)
    {
        string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
        for (int i = 0; i < allowExt.Length; i++)
        {
            if (allowExt[i] == _fileExt) { return true; }
        }
        return false;

    }

    public static string GetFileName()
    {
        Random rd = new Random();
        StringBuilder serial = new StringBuilder();
        serial.Append(DateTime.Now.ToString("HHmmss"));
        serial.Append(rd.Next(100, 999).ToString());
        return serial.ToString();

    }
复制代码

代码比较简单,看官有疑问可以评论,我会逐一回复。

运行defualt.aspx页面以后显示的效果是:

jquery+ajax 文件上传功能(无ifram嵌套)_第1张图片

上传图片则显示对应的图片:

jquery+ajax 文件上传功能(无ifram嵌套)_第2张图片

 

 上传压缩文件(.rar)则显示上传成功图片:

jquery+ajax 文件上传功能(无ifram嵌套)_第3张图片

由于服务端对文件类型有限制,如果需要支持更多类型的文件,请在服务端代码中进行修改

界面比较粗糙,看官见笑了...

附上源代码(直接通过调试运行代码,显示不出图片预览,发布出来以后就没有问题):http://files.cnblogs.com/xlhblogs/ajax_FileUP.rar

你可能感兴趣的:(jquery+ajax 文件上传功能(无ifram嵌套))