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

有时候我们需要上传图片时不刷新页面，那么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 = 0; i < allowExt.Length; i++)
        {
            if (string.Compare(allowExt[i], _ImageExt, true) == 0)
            { 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(0, 999999).ToString());
        return serial.ToString();

    }

    #endregion

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

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

posted @ 2016-02-21 19:03  风琴~云淡  阅读(1929)  评论(0)  编辑  收藏  举报