通过表单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. SOA_环境安装系列5_Oracle ADF安装SOA Extensions(案例)

    2015-01-02 Created By BaoXinjian

  2. mrp功能分类

    mrp主要有六大功能子系统:[工程管理子系统].[销售管理子系统].[计划管理子系统].[采购管理子系统].[库存管理子系统].[MRP运行管理子系统].[工程管理子系统]主要功能:产品/物料编码表. ...

  3. Tomcat的8009端口AJP的利用

    Tomcat在安装的时候会有下面的界面,我们通常部署war,用的最多的是默认的8080端口. 可是当8080端口被防火墙封闭的时候,是否还有办法利用呢? 答案是可以的,可以通过AJP的8009端口,下 ...

  4. eclipse导出jar包

    第一种:普通类导出jar包,我说的普通类就是指此类包含main方法,并且没有用到别的jar包. 1.在eclipse中选择你要导出的类或者package,右击,选择Export子选项: 2.在弹出的对 ...

  5. Python中作Q-Q图(quantile-quantile Plot)

    Q-Q图主要可以用来回答这些问题: 两组数据是否来自同一分布 PS:当然也可以用KS检验,利用python中scipy.stats.ks_2samp函数可以获得差值KS statistic和P值从而实 ...

  6. Intellisense for Xrm.Page in CRM 2011

    Intellisense for Xrm.Page in CRM 2011 In CRM 2011 javascripts for crm forms can be stored externally ...

  7. Java 线程间通讯(管道流方式)

    一.管道流是JAVA中线程通讯的常用方式之一,基本流程如下: 1)创建管道输出流PipedOutputStream pos和管道输入流PipedInputStream pis 2)将pos和pis匹配 ...

  8. Ext 项目随笔

    region: This region's layout position (north, south, east, west or center). Read-only. collapsible:t ...

  9. 范式(Oracle)

    三范式 ------------数据库的三范式-------------- (1).要有主键,列不可分 (2).不能存在部分依赖:当有多个字段联合起来作为主键的时候,不是主键的字段不能部分依赖于主键中 ...

  10. nginx/Windows-1.9.0的日志分割

    @echo offrem @echo off rem 取1天之前的日期echo wscript.echo dateadd("d",-1,date) >%tmp%\tmp.vb ...