bootstrap图片上传控件 fileinput

最新推荐文章于 2024-08-08 07:51:59 发布

weixin_30693683

最新推荐文章于 2024-08-08 07:51:59 发布

阅读量169

点赞数 1

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/leolzi/p/8462001.html

版权

前端

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