.NET File 多图上传

Posted 2021-11-27 smilezeng

html代码：

<div>
      <div>
         <input type="file" style="display:none" id="files" multiple="multiple" accept="image/*"/>
         <input type="button" value="点击上传" id="btnfile" /> <input type="button" value="确认提交" id="btnupload" />
     </div>
        <div class="imgpreview">

        </div>
    </div>

然后添加点样式：

<style>
        #btnfile, #btnupload {
            width: 120px;
            height: 30px;
            background: #2ECC71;
            text-align: center;
            margin: 10px auto;
            border: none;
            color: #f5f4f4;
            border-radius: 15px;
            outline: none;
            font-size: 14px;
        }

        .imgpreview {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }

        .delete {
            display: none;
            position: absolute;
            cursor: pointer;
            z-index: 999;
            top: 0px;
            right:1px;
        }

        .imgpreview > div {
            width: 24%;
            height: auto;
            margin-left: 5px;
            position: relative;
        }

        .imgpreview > div > img {
            width: 100%;
            
        }

        .imgpreview > div:hover .delete {
            display: block;          
        }

        .imgpreview > div :hover {
            opacity: 0.4;
            color: #fff;
            background: rgba(0,0,0,0.5);
            position: relative;
        }
            
    </style> 

View Code

js代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            var formdata = new FormData();
            
            $("#btnfile").click(function () {
                $("#files").trigger("click");             
            });
            $("#files").change(function (e) {
                var allfile = e.target.files;
                var name = ‘‘, div = ‘‘, image = ‘‘;
                for (var i = 0; i < allfile.length; i++) {
                    var first = allfile[i];
                    var reader = new FileReader();
                    reader.readAsDataURL(first);
                    reader.onloadend = (function (i) {
                        var div = $("<div><span class=\"delete\">X</span></div>");
                            var img = $("<img/>");
                            img.attr("src", this.result);
                            div.append(img);
                            $(".imgpreview").append(div);
                            formdata.append("uploadfile", first)
                    });
                };
            })

            $("#btnupload").click(function () {
                //formdata.append("text", "1");
                //formdata.append("text", "2");
                $.ajax({
                    url: "program/action.aspx?r=" + new Date(),
                    type: "POST",
                    data: formdata,
                    cache: false,         //不设置缓存
                    processData: false,  // 不处理数据
                    contentType: false   // 不设置内容类型
                });               
            });
            
        });
       
        
    </script>

后台处理：

 public void uploadimg()
    {
        //string text = Request.Form["text"];
        System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
        for (int i = 0; i < files.AllKeys.Count(); i++)
        {
            if (files.AllKeys[i] == "uploadfile")
            {              
                if (files[i].FileName.Length > 0)
                {
                    System.Web.HttpPostedFile postedfile = files[i];
                    string filePath = "";
                    var ext = Path.GetExtension(postedfile.FileName);
                    var fileName = DateTime.Now.Ticks.ToString() + ext;
                    // 组合文件存储的相对路径
                    filePath = "/mytest/upload/" + fileName;
                    // 将相对路径转换成物理路径
                    var path = Server.MapPath(filePath);                  
                    postedfile.SaveAs(path);

                }
            }
        }

    }