[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

时间:2022-11-22 14:51:29

通过表单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;
            }
        }
    }
}