zoukankan      html  css  js  c++  java
  • bootstrap图片上传控件 fileinput

    前端

    1.要引用的js  

    fileinput.js      fileinput.css

    <link type="text/css" rel="stylesheet" href="~/HContent/css/fileinput.css" />  //-----------样式
    <script src="~/HContent/js/fileinput.js"></script>                 //基本的js
    <script src="~/HContent/js/locales/zh.js"></script>                 //中文js

    2.html代码

    <div class="col-sm-10">
      <div class="file-loading">
         <input id="uploadFile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
      </div>
    </div>

    3.js代码

            $('#uploadFile').fileinput({
                language: 'zh',        //使用中文
                theme: 'fa',          
                showUpload: false,      //upload按钮不显示
                uploadUrl: '@Url.Action("ImageRecive", "BeadHouse")',   //服务器url调用路径
                allowedFileExtensions: ['jpg', 'png', 'gif'],    //允许的文件格式
                overwriteInitial: false,
                maxFileSize: 1000,                    //文件最大尺寸
                maxFilesNum: 3,                      //文件最大数量
                slugCallback: function (filename) {
                    return filename.replace('(', '_').replace(']', '_');
                },
            });

    js的消息响应处理

    $("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
                var d = data.response;//接收后台返回的数据
                if (d.Code == 1) {
                    var bToObj = JSON.parse(d.Record);
                    
                    if (bToObj[0] != null) {
    
                        var test = window.location.origin + window.location.pathname;
                        var imgid = bToObj[0];
          
                    }
                }
                else {
                    $.alert(d.Message);
                }
            });

    4.C#后台处理

            
          //图片接收后保存
         public ActionResult ImageRecive() { string[] extName = { ".jpg", ".gif", ".jpeg", ".png", ".pdf" }; var _directory = HttpContext.Server.MapPath("~/BHImage"); List<string> filenames = new List<string>(); HttpFileCollection upload = System.Web.HttpContext.Current.Request.Files; for (int i = 0; i < upload.Count; i++) { if (upload.Count > 3) { return AjaxFail("限制上传文件数量"); } HttpPostedFileBase file = Request.Files[i]; string ext = Path.GetExtension(file.FileName).ToLower(); if (!extName.Contains(ext)) { return AjaxFail("请上传jpg、gif、jpeg、png、pdf格式文件"); }; if (file.InputStream.Length > 1024000) { return AjaxFail("上传的文件不要超过1M"); } var namefix = System.Guid.NewGuid().ToString() + "_" + System.DateTime.Now.ToString("HHmmss") + Path.GetExtension(file.FileName); string file_name = "/" + namefix; filenames.Add(namefix); file.SaveAs(_directory + file_name); } return AjaxSuccess(filenames.Count.ToString(), filenames); }

     5.C#几个基础函数

            /// <summary>
            /// ajax访问,操作成功时返回json
            /// </summary>
            /// <param name="message">消息</param>
            /// <param name="data">数据</param>
            /// <returns></returns>
            protected JsonResult AjaxSuccess(string message, object data)
            {
                if (data is Object)
                {
                    return Cgl_Json(1, message, data, true);
                }
                else
                {
                    return Cgl_Json(1, message, data, false);
                }
            }
            /// <summary>
            /// ajax访问时,返回json
            /// </summary>
            /// <param name="code">代码 -1 :未登录,1:成功,0:失败</param>
            /// <param name="message">消息</param>
            /// <param name="data">数据</param>
            /// <param name="isSerialize">是否序列化</param>
            /// <returns></returns>
            protected JsonResult Cgl_Json(int code, string message, object data, bool isSerialize)
            {
                var jj = new AjaxResult() { Code = code, Message = message, Record = data };
    
                if (isSerialize)
                {
                    jj.Record = JsonConvert.SerializeObject(jj.Record, Formatting.Indented, new IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd" });
                }
    
                return new JsonResult() { JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = jj };
            }
  • 相关阅读:
    【MySQL】若sql语句中order by指定了多个字段,则怎么排序?
    【golang】golang中结构体的初始化方法(new方法)
    【feign】拦截输出日志
    【Feign】Feign ,OpenFeign以及Ribbon之间的区别?
    没有安装插件:node-sass , sass-loader@6.0.7 导致在style标签中使用 lang="scss" 报错
    解决:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    解决:flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突
    缺少标签template抱歉的包裹报错:[Vue warn]: Failed to mount component: template or render function not defined.
    两个(div)元素使用了display:inline-block后出现错位问题解决
    块级标签使用 display:inline-block;显示一行,存在多余的边距的bug解决办法
  • 原文地址:https://www.cnblogs.com/leolzi/p/8462001.html
Copyright © 2011-2022 走看看