zoukankan      html  css  js  c++  java
  • 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文件

  • 相关阅读:
    C++成员变量与函数内存分配
    Sqlite ContentProvider Loader 上下文 对话框
    好书好人生--读书的步骤
    小智慧40
    流媒体开发之-直播界面切换电视台频道
    HDU 4617Weapon(两条异面直线的距离)
    BON取代半岛电视,美国人要“换口味”了吗?
    【Todo】Lucene系统学习
    Zookeeper学习 & Paxos
    C++中的虚继承 & 重载隐藏覆盖的讨论
  • 原文地址:https://www.cnblogs.com/hq89533921/p/13262254.html
Copyright © 2011-2022 走看看