使用Ajax上传图片到服务器（不刷新页面）

时间：2021-02-20 23:22:57

有时候我们需要上传图片时不刷新页面，那么Ajax就是很好的东西哦。之前在网上找了很多的资料都不对，不是这里就是那里错，这是本人亲自测试了的哈，是没有问题的，若有不足之处希望指正。我用的.net，对了这里还需要引用Jquery跟Jquery.form.js两个文件，没看到上传附件在哪里咯，需要的朋友可以给我留言哈

前台代码 Default2.aspx

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

<!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="admin/js/jquery.js" type="text/javascript"></script>

    <script src="admin/js/jquery.form.js" type="text/javascript"></script>

    <script type="text/javascript">

        function TajaxFileUpload() {

            var imgname = $.trim($("#File1").val());

            if (imgname != "") {

                $("#form1").ajaxSubmit({

                    success: function (html, status) {

                        if (status == "success") {

                            var json = eval('(' + html + ')');

                            if (json.state == "success") {                            //上传成功

                                alert("上传成功!");

                            }

                            else {

                                alert(json.msg + "上传失败!");

                            }

                        }

                    },

                    error: function (error) {

                        alert(error);

                    },

                    url: 'admin/ajax/upload.ashx', /*设置post提交到的页面*/

                    type: "post", /*设置表单以post方法提交*/

                    dataType: "text" /*设置返回值类型为文本*/

                });

            }

            else {

                alert("请上传图片！");

                return false;

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="File1" type="file" name="picture" />

        <input type="button" value="上 传" onclick="TajaxFileUpload()" />

    </div>

    </form>

</body>

</html>

Ajax页面代码 upload.ashx

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

using System;

using System.Web;

using System.IO;

using System.Text;

using System.Net;

public class upload : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        try

        {

            string time = DateTime.Now.ToString("yyyyMMdd").Trim();

            string fileName = time;

            HttpPostedFile pic = context.Request.Files["picture"];

            string foldPath = HttpContext.Current.Server.MapPath("~/UploadFile/") + fileName+"\\";

            //foldPath = foldPath + fileName;

            DirectoryInfo di = new DirectoryInfo(foldPath);

            if (!di.Exists)//如果文件夹目录不存在

            {

                di.Create();//新建文件夹

            }

            string imageName = UpLoadImage(pic, foldPath);

            context.Response.Write("{state:'success',msg:'上传成功：" + imageName + "'}");

        }

        catch (Exception ex)

        {

            context.Response.Write("{state:'error',msg:'" + ex.Message + "'}");

        }

    }

    #region 上传图片

    /// <summary>

    /// 上传图片

    /// </summary>

    /// <param name="imgfile">文件http流</param>

    /// <param name="nowpath">所需放置的文件路径</param>

    /// <returns>上传成功，返回字符串，否则，抛出异常</returns>

    public static string UpLoadImage(HttpPostedFile imgfile, string nowpath)

    {

        try

        {

            string serverPath = System.Web.HttpContext.Current.Server.MapPath("~");

            string toFilePath = Path.Combine(serverPath, nowpath);

            //获取要保存的文件信息

            FileInfo file = new FileInfo(imgfile.FileName);

            //获得文件扩展名

            string fileNameExt = file.Extension;

            //验证合法的文件

            if (CheckImageExt(fileNameExt))

            {

                //生成将要保存的随机文件名

                string fileName = DateTime.Now.ToString("yyyyMMddHHmmss").Trim() + fileNameExt;

                //获得要保存的文件路径

                string serverFileName = toFilePath +fileName;

                //物理完整路径

                string toFileFullPath = serverFileName; //HttpContext.Current.Server.MapPath(toFilePath); 

                //将要保存的完整文件名

                string toFile = toFileFullPath;//+ fileName; 

                ///创建WebClient实例

                WebClient myWebClient = new WebClient();

                //设定windows网络安全认证   方法1

                myWebClient.Credentials = CredentialCache.DefaultCredentials;

                ////设定windows网络安全认证   方法2

                imgfile.SaveAs(toFile);

                string relativePath = fileName;

                return relativePath;

            }

            else

            {

                throw new Exception("文件格式非法，请上传gif|jpg|bmp|png格式的文件。");

            }

        }

        catch

        {

            throw;

        }

    }

    #endregion

    #region 图片上传格式和文件名

    /// <summary>

    /// 检查是否为合法的上传图片

    /// </summary>

    /// <param name="_fileExt"></param>

    /// <returns></returns>

    public static bool CheckImageExt(string _ImageExt)

    {

        string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".bmp", ".png" };

        for (int i = ; i < allowExt.Length; i++)

        {

            if (string.Compare(allowExt[i], _ImageExt, true) == )

            { return true; }

        }

        return false;

    }

    private static string GetImageName()

    {

        Random rd = new Random();

        StringBuilder serial = new StringBuilder();

        serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));

        serial.Append(rd.Next(, ).ToString());

        return serial.ToString();

    }

    #endregion

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

最后上传的图片的保存路径效果图如下：

aaarticlea/png;base64,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" alt="" />

相关文章