码迷,mamicode.com
首页 > Web开发 > 详细

bootstrap图片上传控件 fileinput

时间:2018-02-23 15:56:14      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:min   js代码   llb   lang   too   int   map   show   img   

前端

1.要引用的js

<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); }

 

bootstrap图片上传控件 fileinput

标签:min   js代码   llb   lang   too   int   map   show   img   

原文地址:https://www.cnblogs.com/leolzi/p/8462001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!