C#如何使用input[type=file]进行多个图片上传（XMLHttpRequest与后台交互）

最新推荐文章于 2023-04-26 00:32:35 发布

随心随性随天意

最新推荐文章于 2023-04-26 00:32:35 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： XMLHttpRequest type=file 图片上传

本文链接：https://blog.youkuaiyun.com/weixin_44713389/article/details/90746459

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的图片上传功能，实现了单击上传、图片预览及自动生成缩略图的效果。通过代码示例，详细展示了如何使用FileReader API读取文件，以及如何通过jQuery调整样式和处理文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

单击：
在这里插入单击图片描述xq
选择：
在这里插入图片描述
自动出现另一个可选择图片：

代码块

抽离出来有点累，改成简略版了

Html代码

<form id="form1">
    <div id="sellcontent">
        <div style="width: 150px; height: 150px; display: inline-block;">
            <input type="file" id="file3" name="file3" title="日常图片" multiple="multiple" onchange="readFilec()" class="sellfile1" />
            <img src="images/sell3.jpg" id="img3" onload="ReSizePic(this)" class="sellimg1" />
        </div>
        <div style="width: 150px; height: 150px; display: inline-block;">
            <input type="file" id="file4" name="file4" title="日常图片" multiple="multiple" onchange="readFiled()" class="sellfile1" style="z-index: -1" />
            <img src="images/sell3.jpg" id="img4" onload="ReSizePic(this)" />
        </div>
    </div>
    <input type="text" name="miao"/>
    <input id="sellbutton1" type="button" value="提交" onclick="UpladFile()" />
</form>

CSS样式

#sellcontent .sellfile1 {
    margin-left: 5px;
    opacity: 0;
    position: absolute;
    width: 145px;
    height: 145px;
}

#sellcontent .sellimg1 {
    height: 145px;
    width: 147px;
    border: 1px dashed black;
    margin-left: 5px;
    opacity:1;
}

JS代码


    <script>
        $(function () {
            //初始图片隐藏
            $("#sellcontent img:gt(0)").css('opacity', '0');
        })
        function readFilec() {
            //第二张图片启用
            $("#sellcontent input[type=file]").eq(1).css({ 'z-index': '1' });
            $("#sellcontent img").eq(1).addClass('sellimg1');
            $("#sellcontent img").eq(1).css('opacity', '1');
            //得到文件对象
            var imgFile = document.getElementById('file3').files[0];
            //op
            var fileReader = new FileReader();
            //设置回调函数，即获取到文件路径后的操作
            fileReader.onload = function () {
                var img = document.getElementById('img3').src = fileReader.result;
            }
            //读取文件
            fileReader.readAsDataURL(imgFile);
        };
        function readFiled() {
            //得到文件对象
            var imgFile = document.getElementById('file4').files[0];
            //op
            var fileReader = new FileReader();
            //设置回调函数，即获取到文件路径后的操作
            fileReader.onload = function () {
                var img = document.getElementById('img4').src = fileReader.result;
            }
            //读取文件
            fileReader.readAsDataURL(imgFile);
        };
        //设置自动生成图片缩略图
        function ReSizePic(ThisPic) {
            var RePicWidth = 200; //这里修改为您想显示的宽度值

            //============以下代码请勿修改==================================

            var TrueWidth = ThisPic.width;    //图片实际宽度
            var TrueHeight = ThisPic.height;  //图片实际高度
            var Multiple = TrueWidth / RePicWidth;  //图片缩小(放大)的倍数
            ThisPic.width = RePicWidth;  //图片显示的可视宽度
            ThisPic.height = TrueHeight / Multiple;  //图片显示的可视高度
        }


        function UpladFile() {
            var q = document.getElementsByClassName('sellfile1');     //根据样式获取文件集合
            var FileController = "Method.aspx";                    // 接收上传文件的后台地址            
            // FormData 对象
            var fileObj = q[0].files[0]; // js 获取文件对象
            var form = new FormData(document.getElementById("form1"));//直接获取表单所有值，文件无法直接获取只能一个一个获取
            form.append("file", fileObj);                           // 文件对象
            fileObj = q[1].files[0]; // js 获取文件对象
            form.append("file", fileObj);                           // 文件对象
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            //初始化XHLHttpRequest
            xhr.open("post", FileController, true);
            //发送请求
            xhr.send(form);
            //回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                    if (xhr.responseText == "True")
                        alert("上传成功");
                    else
                        alert("上传失败");
                }
            }
        }
     </script>

Method.aspx代码

           string name = Request["miao"].ToString();
            //获取文件集合
            var flist = Request.Files;
            //获取窗体变量
            var form = Request.Form;
            string a = form["name"];
            for (int i = 0; i < flist.Count; i++)
            {
                if (flist[i].FileName != "")
                    //汽车图库可以改为相应的文件夹
                    flist[i].SaveAs(Server.MapPath(".") + "/汽车图库/" + flist[i].FileName);
                else
                    break;
            }
            bool ok = true;
            Response.Write(ok);

附上简陋版连接：https://download.youkuaiyun.com/download/weixin_44713389/11225024
关于图片右上角的小叉懒得做，有做的大哥发我一份576004720
以上