jquery+ajax 文件上传功能（无ifram嵌套）

时间 2019-12-04

标签 jquery+ajax jquery ajax 文件上传功能 ifram 嵌套栏目 JQuery 繁體版

原文原文链接

这两天作项目（MVC3），不少地方都须要使用到文件上传功能，可是采用的方式都是经过submit表单的方式来实现附件的上传的，这样感受每次都要刷新页面很不爽，因此想来想去仍是准备写一个通用的文件上传功能来实现文件上传。javascript

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

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

好了废话很少说，仍是上代码：java

首先是展现页面须要作的：分别引入jquery.js，jquery-form.js，还有fileload.jsjquery

如下是展现页面代码：ajax

<!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代码：api

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();

    }

代码比较简单，看官有疑问能够评论，我会逐一回复。dom

运行defualt.aspx页面之后显示的效果是：post

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

上传压缩文件（.rar）则显示上传成功图片：

因为服务端对文件类型有限制，若是须要支持更多类型的文件，请在服务端代码中进行修改。

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

附上源代码（直接经过调试运行代码，显示不出图片预览，发布出来之后就没有问题）：http://files.cnblogs.com/xlhblogs/ajax_FileUP.rar

转自https://www.cnblogs.com/xlhblogs/archive/2012/07/05/2577116.html