使用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 = ; 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="" />

使用Ajax上传图片到服务器（不刷新页面）的更多相关文章

ajax上传图片到服务器
通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...
js ajax上传图片到服务器
$("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...
确认框的使用。弹出一个确认框，Ajax提交一个请求，刷新页面。
视图: <td> @if (item.ReviewProject.DeclareState == DeclareOrReviewState.正在进行 && !item.Is ...
ajax上传图片到服务器简单操作
前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...
Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
使用ajax和history.pushState无刷新改变页面URL onpopstate（转）
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
Ajax回退刷新页面问题的解决办法
在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介 ...
Ajax异步调用http接口后刷新页面
使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...

随机推荐

用SQLite查看编辑android导出的微信聊天记录
上一篇我们已经能够完成文字版微信聊天记录导出android了,也即复制或剪切MicroMsg.db文件到电脑,以.db格式结尾的文件是数据库文件(database document),需要安装相关数据 ...
我的Java书单之优秀的入门书
我始终相信,学习任何一门新技术,该技术相关的优秀书籍总是最好的资料.当然了,优秀的视频教程能帮组你快速地了解该技术,但是要深入和系统地去学习该技术,好的书籍就显得尤为重要了.结合我自己学习java的经 ...
python 深入模块和包
模块可以包含可执行语句以及函数的定义. 这些语句通常用于初始化模块. 它们只在第一次导入时执行.只在第一次导入的时候执行,第一次.妈蛋的第一次...后面再次导入就不执行了. [1](如果文件以脚本 ...
UnsupportedClassVersionError: Bad version number in .class file
java.lang.UnsupportedClassVersionError: Bad version number in .class file造成这种过错是ni的支撑Tomcat运行的JDK版本与 ...
PYTHON 自动化之路（二）
一.python 模块的使用模块的使用: import os #调用 os 模块 cmd_s = os.popen("dir").read() #打开路径为结果保存为cmd_sp ...
hiho #1223 不等式
#1223 : 不等式时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述给定n个关于X的不等式,问最多有多少个成立. 每个不等式为如下的形式之一: X < C X ...
Android列表控件ListView详解
ListView绝对可以称得上是Android中最常用的控件之一,几乎所有应用程序都会用到它. 由于手机屏幕空间都比较有限,能够一次性在屏幕上显示的内容并不多,当我们的程序中有大量的数据需要展示的时候 ...
COGS 2479 偏序题解
[题意] 给定一个有n个元素的序列,元素编号为1~n,每个元素有三个属性a,b,c,求序列中满足i<j且ai<aj且bi<bj且ci<cj的数对(i,j)的个数. 对于30%的 ...
1个简单的Log
#pragma once #include <windows.h> #include <process.h> class CLogger { public: static CR ...
MD5 加密字符串
public class MD5 { /*** * MD5加码生成32位md5码 */ public static String string2MD5(String inStr){ MessageD ...

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

使用Ajax上传图片到服务器（不刷新页面）的更多相关文章

随机推荐

热门专题