input+ajax+ashx多张图片上传

最新推荐文章于 2021-08-04 12:22:10 发布

cgsthtm

最新推荐文章于 2021-08-04 12:22:10 发布

阅读量1.1k

点赞数

分类专栏： C# javascript jquery 文章标签： ajax ashx C# input 多图上传

本文链接：https://blog.csdn.net/CGS_______/article/details/79730226

版权

C# 同时被 3 个专栏收录

92 篇文章 2 订阅

订阅专栏

javascript

22 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

0x01 前端

<input id="File1" name="File1" type="file" accept="image/gif, image/jpeg,image/png,image/jpg" multiple="multiple"/>
<input type="button" name="save" id="save" value="点击保存" />

<script>
$("#save").click(function () {
        var filelength = document.getElementById("File1").files.length
        var file,file1 = null;
        if (filelength<1) {
            alert("请选择至少一张图片")
        } else if (filelength > 2) {
            alert("请选择至多两张图片")
        } else if (filelength==1) {
            file = document.getElementById("File1").files[0];
        } else if (filelength == 2) {
            file = document.getElementById("File1").files[0];
            file1 = document.getElementById("File1").files[1];
        }

        var strData = new FormData();
        strData.append("file", file);//第一张图片
        strData.append("file1", file1);//第二张图片

        $.ajax({
            type: "POST",
            url: "../../Handler/Business/EmissionsEntrust/EmissionsEntrustControlHandler.ashx",
            data: strData,
            processData: false,
            contentType: false,
            async: false,
            success: function (returnData) {
                //console.log(returnData);
                if (returnData.State=="y") {
                    alert(returnData.Info);
                } else {
                    alert(returnData.Info);
                }
            },
            error: function (returnData) {
                console.log(returnData);
            }
        });

 });
</script>

0x02 后台

HttpFileCollection files = context.Request.Files;
HttpPostedFile FileSave = files[0];  //用key获取单个文件对象HttpPostedFile
string imgName = DateTime.Now.ToString("yyyyMMddhhmmss") + model.VIN;
string imgPath = "/Business/ManualJudge/Img/" + imgName + Path.GetExtension(FileSave.FileName);     //通过此对象获取文件名
string AbsolutePath = context.Server.MapPath(imgPath);
FileSave.SaveAs(AbsolutePath);              //将上传的东西保存

0x03 问题

如果需要上传两张图片，则需要在前台代码中增加三个变量用来接收<input id="file" type="file" multiple="multiple"/>的file，例如第一张图片var file1 = document.getElementById("file").files[0]，第二张图片var file2 = document.getElementById("file").files[1]。

再使用var data = new FormData(); data.append("file1",file1); data.append("file2",file2);作为ajax的data参数值传递给后台ashx一般处理程序。

后台使用HttpFileCollection files = context.Request.Files;接收前台传递的文件（注：ajax的data中有几个input的file对象，后台才能接收几个file）