HTML+ASHX上传传图片

最新推荐文章于 2021-06-19 22:25:40 发布

djk8888

最新推荐文章于 2021-06-19 22:25:40 发布

阅读量357

点赞数 1

分类专栏： ASP.NET代码 html JS代码

本文链接：https://blog.csdn.net/djk8888/article/details/115630292

版权

ASP.NET代码同时被 3 个专栏收录

126 篇文章 1 订阅

订阅专栏

html

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

上传页面，index.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>上传图片</title>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/ajaxfileupload.js" type="text/javascript"></script>

</head>
<body>
    <input type="file" id="file1" name="file" accept="image/jpg,image/jpeg,image/gif,image/png" onchange="uploadImage()" />
    <!--<input type="button" value="上传" id="btnUpload" />--><br />
    <img id="img1" width="250">

    <script>
        $(function () {
            $("#btnUpload").click(function () {
                uploadImage();
            })
        });
        function uploadImage() {
            //判断是否选择图片
            if (IsSelectImage() == false) {
                alert("请选择一个图片再上传!");
                return;
            }
            //判断图片格式
            if (CheckImageExtension() == false) {
                alert("您选择的不是图片文件!");
                return;
            }
            //判断图片大小
            if (CheckImageSize() == false) {
                alert("您选择的文件不可以超过5mb!");
                return;
            }
            ajaxFileUpload();    //开始上传图片
        }
        //开始上传图片
        function ajaxFileUpload() {
            $.ajaxFileUpload({
                url: "uploadImage.ashx",//用于文件上传的服务器端请求地址
                secureuri: false,//一般设置为false
                fileElementId: "file1",//文件上传空间的id属性
                dataType: "text",// ashx的返回类型是："text/plain"，字符串文本... (也有用json的...)
                success: function (data, status) {
                    var msg = data.replace(/<[^>]+>/g, "");//过滤html标签,只留下纯字符串
                    if (msg.length > 0) {//有返回值
                        if (msg.indexOf("error") != -1) {//发现报错
                            alert(msg);
                        }
                        else {
                            $("#img1").attr("src", "../" + msg);//显示已上传的图片
                            //alert("图片上传成功!");
                            Update2SQL(msg);//图片路径保存到数据库
                        }
                    }
                    else {
                        alert("图片上传失败!");
                    }                
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            });
        }
        //图片路径保存到数据库
        function Update2SQL(imgUrl) {
            //....AJAX....
        }
        //判断是否选择图片
        function IsSelectImage() {
            var img = document.getElementById('file1').files[0];
            if (!img) {
                return false;
            }
            else {
                return true;
            }
        }
        //判断图片格式
        function CheckImageExtension() {
            var filepath = $("#file1").val();
            var extStart = filepath.lastIndexOf(".");
            var filextension = filepath.substring(extStart, filepath.length).toLowerCase();
            if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
                return false;
            } else {
                return true;
            }
        }
        //判断图片大小
        function CheckImageSize() {
            var fileData = document.getElementById('file1').files[0];
            var size = fileData.size;//注意，这里读到的是字节数byte
            var maxSize = 1024 * 1024 * 5;//最大5mb，转换成byte字节(注：1mb=1024 * 1024 byte)
            if (size > maxSize) {
                return false;
            }
            else {
                return true;
            }
        }
    </script>
</body>
</html>

一般处理程序，uploadImage.ashx :

<%@ WebHandler Language="C#" Class="uploadImage" %>

using System;
using System.Web;

public class uploadImage : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        HttpPostedFile postedFile = context.Request.Files["file"];
        //判断上传的文件是否为空
        if (postedFile == null)
        {
            string msg = "error:请先选择图片再上传";
            context.Response.Write(msg);
            return;
        }

        int fileSize = postedFile.ContentLength;//单位：byte
        if (fileSize > 1024 * 1024 * 5)
        {
            string msg = "error:上传的图片不可以超过5MB";
            context.Response.Write(msg);
            return;
        }

        //获取后缀名 判断文件名格式是不是正确
        string fileExt = System.IO.Path.GetExtension(System.IO.Path.GetFileName(postedFile.FileName));
        fileExt = fileExt.ToLower();
        if (!(fileExt == ".jpg" || fileExt == ".jpeg" || fileExt == ".gif" || fileExt == ".bmp" || fileExt == ".png"))
        {
            string msg = "error:图片格式错误";
            context.Response.Write(msg);
            return;
        }

        //创建文件夹
        string dirPath = "/upload/image/";//保存上传来的文件的文件夹     
        try
        {
            if (System.IO.Directory.Exists(dirPath) == false)
            {
                System.IO.Directory.CreateDirectory(context.Request.MapPath(dirPath));
            }
        }
        catch
        {
            string msg = "error:路径错误";
            context.Response.Write(msg);
        }

        //开始上传
        try
        {
            string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExt;//举例:20210331151332123.jpg
            postedFile.SaveAs(context.Request.MapPath(dirPath + fileName));//保存文件
            string msg = dirPath + fileName;
            context.Response.Write(msg);
        }
        catch
        {
            string msg = "error:上传失败";
            context.Response.Write(msg);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}