• 热门搜索 热门搜索
菜单

您现在的位置是:博客 > 文章详情文章详情

ajax静态上传file文件,并预览图片

原创
时间2023/10/24 01:35:24 发布 预览数量397
分类: c# html .net 标签: C# Javascript

一、前言

最近在做一个项目, 需要静态上传文件到后台,并且在没有提交表单前可以查看上传的文件,看公司代码,都是使用 ifrome 标签实现的, 比较麻烦,于是发现有更简单的方法,支持ajax静态上传,支持上传多文件,好了,废话少说,直接上代码吧

1、前台页面代码:

    <h1>注意:ie浏览器必须是ie10及以上版本才可以</h1>
    <input type="file" id="fileUpload" />
    <img src="" style="display:none" id="img-show" />

    <input type="button" value="ajax静态上传图片" id="ajax-btn" />

2、Jquery代码

    <script type="text/javascript">
        $(function () {
            fileUpload();
            Ajaxbtn();
        });
        function fileUpload() {
            $("#fileUpload").change(function () {
                var Suffix = $(this).val().substring($(this).val().lastIndexOf('.'));
                if (Suffix == ".jpg" || Suffix == ".jpeg" || Suffix == ".png" || Suffix == ".bmp") {
                    //加载图片
                    var file = document.getElementById("fileUpload").files[0];
                    var img = document.getElementById("img-show");  //获取img对象
                    var reader = new FileReader();    //建一条文件流来读取图片  
                    reader.readAsDataURL(file);  //根据url将文件添加的流中
                    //实现onload
                    reader.onload = function (e) {
                        url = reader.result;  //获取文件在流中url  
                        img.src = url;  //将url赋值给img的src属性
                    };
                    $("#img-show").css("display", "block");
                }
                else {
                    alert("图片格式不正确!(正确格式:.jpg、.jpeg、.png、.bmp)");
                }
            });
        }

        function Ajaxbtn() {
            $("#ajax-btn").click(function () {
                //判断是否有要上传的文件
                var length = $("#fileUpload").prop("files").length;
                if (length > 0) {
                    var formData1 = new FormData();
                    // 遍历要上传的文件
                    for (var i = 0; i < length; i++) {
                        formData1.append('fileName' + (i + 1), $("#fileUpload").prop("files")[i]);
                    }
                    // 提交图片数量
                    formData1.append('count', length);
                    //开始上传图片
                    if (length > 0) {
                        $.ajax({
                            url: 'Handler.ashx',
                            type: 'POST',
                            data: formData1,
                            contentType: false,
                            processData: false,
                            async: false,
                            success: function (json) {
                                if (json.status == "true") {
                                    alert("上传成功!文件名为:" + json.data);

                                }
                                else {
                                    alert(json.msg);
                                    return false;
                                }
                            },
                            error: function () {
                            }
                        })
                    }
                }
                else {
                    alert("请上传图片");
                }
            });
        }
    </script>

3、后台操作

using System;
using System.Web;
using System.Web.Script.Serialization;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html";

        if (context.Request.Files.Count > 0)
        {
            int count = Convert.ToInt32(context.Request["count"]);
            string pathArray = string.Empty;
            Random ran = new Random();
            //判断上传图片的数量
            for (int i = 1; i <= count; i++)
            {
                //获取文件
                var fileName = "fileName" + (i).ToString();
                HttpPostedFile file = context.Request.Files[fileName];
                //获取后缀名
                string imgtype = System.IO.Path.GetExtension(file.FileName);
                //判断是不是图片
                if (imgtype != ".jpg" && imgtype != ".jpeg" && imgtype != ".png" && imgtype != ".bmp" && imgtype != ".jpeg")
                {
                    WriteJson(context.Response, "error", "图片格式不正确");
                    break;
                }
                else
                {
                    //拼接文件名
                    string name = DateTime.Now.ToString("yyyyMMddHHmmss") + ran.Next(100, 500) + imgtype;
                    //文件路径
                    string path = AppDomain.CurrentDomain.BaseDirectory.ToString() + string.Format(@"img\{0}",name);
                    //保存
                    file.SaveAs(path);

                    //拼接保存到数据汇总的数据
                    pathArray +=  name+";";
                }

            }
            if (pathArray.Length > 0)
            {
                WriteJson(context.Response, "true", null, pathArray);
            }

        }
        else
        {
            WriteJson(context.Response, "error", "请选择要上传的文件");
        }
    }
    public static void WriteJson(HttpResponse response, string status1, string msg1, object data1 = null)
    {
        response.ContentType = "application/json";
        var obj = new { status = status1, msg = msg1, data = data1 };
        string json = new JavaScriptSerializer().Serialize(obj);
        response.Write(json);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

二、源码下载

地址:https://pan.baidu.com/s/1r_kPP3KFkHiMYU59UYF8yA 密码:08rj

版权声明:本文为Converts的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://www.converts.cn/article/1493.html

暂无评论

暂无评论

目录

推荐阅读

  • 对比MySQL不同版本下表结构和数据存储的差异

    一、前言 在开始之前, 我们需要先了解一下 MySQL 的存储引擎有哪些。 MySQL常用的存储引擎有 InnoDB 和 MyISAM,而且两者都有各自的特点,适用于不同的场景。下面是对这两种存储引擎的简要对比: InnoDB存储引擎 支持事务处理 支持行级锁 支持外键约束 可以根据事务日志实现数据恢复 MyISAM存储引擎 MyISAM 的读取性能要高于 InnoDB(无事务) 支持全文索引

  • Linux系统定时任务 -- crontab命令

    一、前言 有时候需要在 Linux 系统中定时执行一些任务,我们就需要使用 crontab 命令创建定时任务。crontab 是“cron table”的缩写,其功能是管理定时计划任务。在Linux系统中的crond是一个定时计划任务服务,用户只要能够按照正确的格式(分、时、日、月、星期、命令)写入到配置文件中,那么就会按照预定的周期时间自动地执行下去,而crontab命令则是用于配置的工具名称

  • Js验证身份证号码是否正确

    一、前言 一般情况下,提交数据时, 会对要提交的数据进行各种验证,其他的验证我这里就不讲了,现在网上有很多, 我要讲的是对身份证的验证, 我看大部分对身份证的验证都是对身份证的位数进行验证(例如:15位或者18位), 这个其实是不太准确地,在一些系统中, 以身份证为唯一标识的话, 身份证错误会造成很大的问题, 所以我们要增加身份证的验证。接下来我们先普及一下我们国家对 身份证的产生规则 做一下了

  • Docker容器的资源大小限制(CPU、内存、磁盘)

    一、前言 Docker 容器的资源分配往往是最容易被人忽略的参数点,一般情况下不会有太大问题,但是只要出现问题就是灾难性的。 如果 Docker 容器在创建时没有明确设置 memory 参数,那么它的内存限制将取决于操作系统和 Docker 引擎的默认配置。在某些情况下,如果没有明确设置内存限制,容器可能会尝试使用尽可能多的可用内存,这可能会导致性能问题或资源争用。 这似乎看上去并没有什么太

  • Docker 部署FastTunnel,实现内网穿透

    一、前言 最近在学习搭建Elasticsearch集群,但是发现云服务(2核4G)资源根本就不够用,部署上去就直接宕机了。想着服务器资源太贵, 家里刚好有一台64G内存的闲置电脑。不如做一个内网穿透,可以远程访问。工作学习两不误。其实目前市面上已经有很多穿透工具了,比如向日葵~~ ,但是奈何带宽太小了,免费的才1M~~~ 二、什么是 FastTunnel FastTunnel 是用.net

  • 解决:“The configured user limit (128) on the number of inotify instances has been reached....” 错误

    一、场景再现 在linux系统上运行着10个微服务,突然发现某个服务挂了。遇到这种情况,一般就使用命令docker start 就可以解决。 然而发现命令无法使服务起来。根据跟踪容器日志发现是出现了异常,如下所示: shell Unhandled exception. System.IO.IOException: The configured user limit (128) on the nu

  • Docker 安装mysql

    一、创建mysql 容器 shell docker run \d \ 后台运行-restart=always \总是跟随docker启动-privileged=true\获取宿主机root权限p 13306:3306 name mysql \ 容器与主机映射端口为,主机13306,容器3306v /mysql/log:/var/log/mysql \ 容器运行后的名称v /mysql/data:

  • validate service connection: CRI v1 runtime API is not implemented for endpoint \"unix:///var/run/containerd/containerd.sock\": rpc error: code = Unimplemented desc = unknown service runtime.v1.RuntimeService

    一、问题 安装k8s集群, Node节点加入主节点的时候(kubeadm join...),报错,报错信息如下: shell [root@node1 ~] kubeadm join k8s-master:6443 token 4nm8cy.jgxw8go95c1uqt6c discovery-token-ca-cert-hash sha256:f1c08bce4ebeb8deb531b950

  • k8s 安装ingress,并解决拉取镜像失败的问题

    一、前言 Service 是将运行在一组 Pods 上的应用程序公开为网络服务的抽象方法,但是Service 只能在内网间访问(NodePort方式用的较少), 那么外网的路由请求如何发送到 Service 上呢? k8s 为我们提供了 Ingress 网关服务。 二、什么是Ingress ? Ingress 公开从集群外部到集群内服务的 HTTP 和 HTTPS 路由。 流量路由由 Ing

  • ssh 免密登录

    一、前言 SSH(Secure Shell)免密登录是一种安全便捷的远程登录方式,允许用户在不输入密码的情况下连接到远程Linux服务器。它通过密钥认证来实现登录,这种方法可以提高工作效率,同时加强系统的安全性。 二、秘钥的存放位置 一般秘钥都存放在用户的根目录下 ~/.ssh,如下图所示 ! .ssh 目录下一般会有两个文件 idrsa:私钥 、 idrsa.pub:公钥。 !

加载中