jQuery插件实现多图片和单图片上传

前台代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片</title>
    <link href="../../jQuery/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../jQuery/css/aaa.css" rel="stylesheet" />
    <link href="../../jQuery/css/uploadStyle.css" rel="stylesheet" />
    <link href="../../jQuery/css/uploadImg.css" rel="stylesheet" />
    <script src="../../jQuery/js/jquery.min.js"></script>
</head>

<body>
    <div class="main">
        <div class="upload-content">
            <h3>上传图片</h3>
            <div class="content-img">
                <ul class="content-img-list"></ul>
                <div class="file">
                    <i class="gcl gcladd"></i>
                    <input type="file" name="file" accept="image/*" id="upload" multiple>
                </div>
            </div>
            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="button" onclick="saveUser()" value="上传" />
    <script>
        function saveUser() {
            let formData = new FormData();
            for (let i = 0; i < imgFile.length; i++) {
                formData.append(i, imgFile[i]);
            }
            $.ajax({
                url: '../../Ashx/BannerManage.ashx?faction=SaveProdImage',
                type: "POST",
                data: formData,
                cache: false,//不缓存
                contentType: false,// jQuery不要去设置Content-Type请求头
                processData: false,// jQuery不要去处理发送的数据
                success: function (data) {
                    console.log(data);
                }
            })
        }
    </script>
     <script src="../../jQuery/js/bootstrap.min.js"></script>
    <script src="../../jQuery/js/uploadImg.js"></script>
</body>

View Code

后台代码：

public static string UploadFile()
        {

            var filelist = HttpContext.Current.Request.Files;
            if (filelist.Count == 0)
                return Newtonsoft.Json.JsonConvert.SerializeObject(new { ResultCode = 0, ResultMsg = "上传失败" });
            string NewFiles = DateTime.Now.ToString("yyyyMM") + "ymall";
            List<AccessoryDTO> accessoryList = new List<AccessoryDTO>();
            for (int i = 0; i < filelist.Count; i++)
            {
                var file = filelist[i];

                string suffix = Path.GetExtension(file.FileName);
                string fileName = Guid.NewGuid() + suffix.ToLower();
                //string url = "";

                byte[] buffer = new byte[file.InputStream.Length];
                file.InputStream.Read(buffer, 0, (int)file.InputStream.Length);
                Utility.Net.FtpArgs args = new Utility.Net.FtpArgs()
                {

                    Host = ConfigurationManager.AppSettings["ProductImg:FtpHost2"],
                    Port = Convert.ToInt32(ConfigurationManager.AppSettings["ProductImg:FtpPort2"]),
                    UserName = ConfigurationManager.AppSettings["ProductImg:FtpUserName2"],
                    Userpwd = ConfigurationManager.AppSettings["ProductImg:FtpUserpwd2"],
                    RemoteDir = "/" + NewFiles + "/",
                    RemoteFileName = fileName,
                    UploadData = buffer
                };
                Utility.ReturnMessage rm = Utility.Net.CFTP.Upload(args);
                if (!rm.Success)
                {
                    return Newtonsoft.Json.JsonConvert.SerializeObject(new { ResultCode = 0, ResultObject = accessoryList, ResultMsg = "上传异常" });
                    //continue;
                }
                    

                AccessoryDTO dto = new AccessoryDTO();
                dto.AccessoryFileType = file.ContentType;
                if (dto.AccessoryFileType!= "image/jpeg"&& dto.AccessoryFileType != "image/png") //jpg
                {
                    return Newtonsoft.Json.JsonConvert.SerializeObject(new { ResultCode = 0, ResultObject = accessoryList, ResultMsg = "请上传jpg,png格式！！" });
                }
                dto.AccessoryName = file.FileName;
                dto.AccessorySize = file.ContentLength;
                dto.AccessoryUrl = ConfigurationManager.AppSettings["ProductImg:HttpHost2"] + NewFiles + "/" + fileName;
                dto.Sort = i;
                accessoryList.Add(dto);
            }
            return Newtonsoft.Json.JsonConvert.SerializeObject(new { ResultCode = 1, ResultObject = accessoryList, ResultMsg = "上传成功！！" });
        }

View Code

Web配置 FTP路径配置

1         <add key="ProductImg:HttpHost2" value="http://192.168.20.122:8006/" />
2         <add key="ProductImg:FtpHost2" value="192.168.20.122" />
3         <add key="ProductImg:FtpPort2" value="2116" />
4         <add key="ProductImg:FtpUserName2" value="" />
5         <add key="ProductImg:FtpUserpwd2" value="" />

View Code

//注：需引用博客文件中js与css文件