JQuery上传文件揭晓

仗剑辶天涯

于 2022-06-10 11:49:40 发布

阅读量286

点赞数

文章标签： jquery javascript 前端 c# ajax

本文链接：https://blog.csdn.net/qq_22865989/article/details/125218713

版权

这段代码展示了前端使用jQuery实现的文件上传功能，限制了上传文件类型为PNG、JPG图片或单个PDF文件。当文件选择符合要求时，通过AJAX异步提交到后端。后端接收到请求后，将文件保存到指定目录，并进行后续处理。如果上传成功，页面将被刷新。

摘要由CSDN通过智能技术生成

1、前端代码：

<style type="text/css">
        .lblupload {
            height: 28px;
            width: 82px;
            background-color: #ff4400;
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            color: #fff;
            /*margin-top: 3px;*/
            border-radius: 3px;
        }

            .lblupload:hover {
                background-color: #ff4444;
            }

        .uplaod_Div {
            margin-top: 20px;
            text-align: center;
        }
</style>

<script type="text/javascript">

    $(document).ready(function () {
        UpLoadFile();
    }

    function UpLoadFile() {
            $("#uploadfile").change(function () {
                var formData = new FormData();
                var files = $("#uploadfile");
                var uploadFileType = true;
                var uploadPdfCount = true;
                for (var i = 0; i < files[0].files.length; i++) {
                    let fileName = files[0].files[i].name.toUpperCase();
                    if (fileName.indexOf("PNG") < 0 & fileName.indexOf("JPG") < 0 & fileName.indexOf("PDF") < 0) {
                        uploadFileType = false;
                    }
                    if (fileName.indexOf("PDF") > 0 & files[0].files.length>1) {
                        uploadPdfCount = false;
                    }
                }
                if (!uploadFileType) {
                    alert("请选择png|jpg照片或者pdf文件上传");
                    return;
                }
                if (!uploadPdfCount) {
                    alert("仅可以上传一个pdf文件");
                    return;
                }
                for (var i = 0; i < files[0].files.length; i++) {
                    formData.append("file", files[0].files[i]);
                }

                formData.append('type', 'uploadWalkThrough')
                formData.append('vin', $("#vinSelect").val())
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    url: "../Ajax/Ajax_ResourceManage.ashx",
                    success: function (data) {
                        if (data.Result) {
                            alert(data.Message);
                            //重新刷新页面
                            location.reload(true)
                        }
                        else {
                            alert(data.Message);
                        }
                    }
                });
            });
        }

</script>

<html>
    <head>
    </head>
    <body>
       <div class="uplaod_Div">
         <label for="uploadfile" class="lblupload">上传文件</label>
         <input type="file" id="uploadfile" multiple="multiple" style="display: none;" />
       </div>
    <body>
</html>

2、一般处理程序

case "uploadWalkThrough":
      string uploadResourceManage = HttpContext.Current.Server.MapPath("../FileData/ResourceMange" + "\\");
      if (!Directory.Exists(uploadResourceManage))
      {
           Directory.CreateDirectory(uploadResourceManage);
      }
      string filePaths = "";
      var uploadTime = DateTime.Now.ToString("yyyyMMddHHmmss");
      for (int i = 0; i < context.Request.Files.Count; i++)
      {
           HttpPostedFile file = context.Request.Files[i];
           string filePathVoucher = uploadResourceManage + uploadTime + "_" + file.FileName;
           file.SaveAs(filePathVoucher);
           var path = "../FileData/ResourceMange/" + uploadTime + "_" + file.FileName;
           filePaths += "|" + path;
       }

       if (!string.IsNullOrEmpty(filePaths))
       {
          //后续逻辑处理，数据入库
       }
       break;