通过表单Form提交来上传文件的方式这里就不说了;

下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可;

涉及思路:

//发送2次Ajax请求完成js异步上传文件的操作:
          //第1次,post 只上传文件,返回文件名name
          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件
          //(如果有其他参数,也可以通过第2次一并上传)

图片文件已测试没有问题;其他文件带测试;

代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

 

        function upload() {

             

            var file1 = document.getElementById("file1");

 

            postFile(file1.files[0]);

            //if (window.ActiveXObject) { // 判断是否支持ActiveX控件

            //    var fso = new window.ActiveXObject("Scripting.FileSystemObject");

            //    //var f1 = fso.GetFile(path); //"c://test1.txt");

            //    //var ts = f1.OpenAsTextStream(2, true); //文本流

            //   // var ts = file1.files[0].OpenAsTextStream(2, true); //文本流

 

            //   postFile(file1.files[0]);

            //    //    postFile(frm);

            //} else {

            //    alert("不支持js上传文件!");

            //}

            //test();

        }

        //function test() {

        //    var pnsys = new ActiveXObject("WScript.shell");

        //    pn = pnsys.Environment("PROCESS");

        //    alert(pn("WINDIR"));

        //}

 

        function postFile(data) {

            //1.创建异步对象(小浏览器)

            var req = new XMLHttpRequest();

 

            //2.设置参数

            req.open("post", "C02FileUploadsByJs.ashx", true);

 

            //3.设置 请求 报文体 的 编码格式(设置为 表单默认编码格式)

            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // req.setRequestHeader("")

            //4.设置回调函数

            req.onreadystatechange = function () {

                //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功

                if (req.readyState == 4 && req.status == 200) {

 

                    if (req.responseText != "上传出错!") {

                        changeName(req.responseText);

                    }

                }

            };

 

            //4.发送异步请求

            req.send(data);//post传参在此处

        }

 

        function changeName(name) {

            var file1 = document.getElementById("file1");

            var realname = file1.value;

 

            var req = new XMLHttpRequest();

 

            //如果名称遇到中文,请在此处转码,然后放入url中

            req.open("get", "C02FileUploadsByJs.ashx?name=" + name + "&realname=" + realname, true);

 

            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 

            req.onreadystatechange = function () {

                //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功

                if (req.readyState == 4 && req.status == 200) {

                    document.getElementById("sp").innerHTML = req.responseText + "<br/>" + realname;

                }

            };

 

            //4.发送异步请求

            req.send();

        }

 

    </script>

</head>

<body>

    <!--<form id="frm" method="POST" enctype="multipart/form-data" action="FileUploads.ashx">-->

    <form id="frm">

 

        选择要上传的文件:

        <input type="file" name="file1" id="file1" />

        <br />

 

        如果上传的图片,则可以选择如下操作:

        <input type="checkbox" name="chk" value="font" />加文字

        <input type="checkbox" name="chk" value="image" />加图片水印

        <input type="checkbox" name="chk" value="thumbnail" />同时生成缩略图

 

        <!--<input type="submit" value="提交" />-->

        <input type="button" value="提交" onclick="upload();" />

        <br />

        <span id="sp"></span>

    </form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

 

namespace C05_Upload

{

    /// <summary>

    /// FileUploadsByJs 的摘要说明

    /// </summary>

    public class C02FileUploadsByJs : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

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

            //发送2次请求完成js异步上传文件的操作:

            //第1次,post 只上传文件,返回文件名name

            //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件

 

            if (context.Request.HttpMethod.ToLower() == "get")

            {

                try

                {

                    //根据传过来的名称找到服务器上的该文件,并按照realname来重命名

                    string name = context.Request.Params["name"];

                    string realname = context.Request.Params["realname"];

 

                    //去掉路径

                    if (realname.LastIndexOf('\\') > -1)

                        realname = realname.Substring(realname.LastIndexOf('\\') + 1);

 

                    string path = context.Server.MapPath("/uploads/" + name);

                    string pathNew = context.Server.MapPath("/uploads/" + realname);

                    if (File.Exists(path))

                    {

                        File.Copy(path, pathNew, false);

                        File.Delete(path);

                    }

                    context.Response.Write("上传成功!");

                }

                catch (Exception ex)

                {

                    context.Response.Write("上传出错!");

                }

            }

            else//post

            {

                try

                {

                    Stream s = new BufferedStream(context.Request.InputStream);

                    byte[] bytes = new byte[s.Length];

                    s.Read(bytes, 0, bytes.Length);

 

                    string name = Guid.NewGuid().ToString();

                    string path = context.Server.MapPath("/uploads/" + name);

                    File.WriteAllBytes(path, bytes);

 

                    context.Response.Write(name); //"上传成功!");

                }

                catch (Exception ex)

                {

                    context.Response.Write("上传出错!");

                }

            }

            context.Response.End();

        }

 

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)的更多相关文章

  1. 非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

    非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

  2. Flask基础之返回值与form表单提交

    目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...

  3. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  4. form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  5. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  6. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  7. form表单提交转为ajax方式提交

    <form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...

  8. form表单提交没有跨域问题,但ajax提交存在跨域问题

    浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

  9. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

随机推荐

  1. cf666 C. Codeword 组合数学 离线分块思想

                      time limit per test 6 seconds memory limit per test 256 megabytes input standard i ...

  2. [实变函数]2.5 Cantor 三分集

    1 Cantor 三分集的构造:                $$\bex P=\cap_{n=1}^\infty F_n.                   \eex$$ 2 Cantor 三分 ...

  3. SharedPreferences实现自动登录记住用户名密码

    最近Android项目需要一个自动登录功能,完成之后,特总结一下,此功能依靠SharedPreferences进行实现.   SharedPreferences简介 SharedPreferences ...

  4. “/wechat”应用程序中的服务器错误。

    对路径“C:\inetpub\wwwroot3\wechat\img\qrcode\”的访问被拒绝. “/wechat”应用程序中的服务器错误. 对路径“C:\inetpub\wwwroot3\wec ...

  5. 子iframe 怎么调用 父级的JS函数

    window.parent.父级函数名();

  6. Laravel5.0 CSRFチェックを無効化(修改后可以像5.1以上那样从CSRF保护中排除指定URL)

    Laravel5では全てのPOSTに勝手にCSRFチェックが付いてきます.便利と言えば便利ですが.Laravel外からのPOSTを受け取りたいときなど大迷惑です. CSRFチェックを排除する方法が何故 ...

  7. Python进阶06 循环对象

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这一讲的主要目的是为了大家在读Python程序的时候对循环对象有一个基本概念. 循 ...

  8. mac下使用github

    提起github相信大家都不会陌生,在这里就不再赘述了.作为开源代码库以及版本控制系统,使用好了确实会非常受益,再说的势利点,你找工作时给面试官说你经常维护自己的技术博客和github,相信你给他的印 ...

  9. Perl中文/unicode/utf8/GB2312之间的转换

    参考:http://daimajishu.iteye.com/blog/959239不过具测试,也有错误:原文如下: # author: jiangyujieuse utf8;  ##在最后一个例子, ...

  10. jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...