bootstrap 图片上传入门

最新推荐文章于 2023-05-07 18:57:17 发布

IT坚持吧

最新推荐文章于 2023-05-07 18:57:17 发布

阅读量1.3w

点赞数 10

本文链接：https://blog.csdn.net/qq_38688799/article/details/89326159

版权

Bootstrap 图片上传入门

导入图片上传 css js

**下载地址：**https://github.com/kartik-v/bootstrap-fileinput
在这里插入图片描述

这里我们先放一个图片控件再放一个点击修改头像Button

<img style="width:100px;height:100px" id="imgEmdImg" class="img-circle">
<button type="button" id="btnImg" class="btn btn-default" data-dismiss="modal">修改头像</button>

初始化 fileinput

var EmImg = ""; //定义初始头像  我这里定义为空

     //初始化fileinput
            var FileInput = function () {
                var oFile = new Object();
    
                //初始化fileinput控件（第一次初始化）
                oFile.Init = function (ctrlName, uploadUrl) {
                    var control = $('#' + ctrlName);
    
                    //初始化上传控件的样式
                    control.fileinput({
                        language: 'zh', //设置语言
                        uploadUrl: uploadUrl, //上传的地址
                        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        showCaption: false,//是否显示标题
                        browseClass: "btn btn-primary", //按钮样式
                        //dropZoneEnabled: false,//是否显示拖拽区域
                        //minImageWidth: 50, //图片的最小宽度
                        //minImageHeight: 50,//图片的最小高度
                        //maxImageWidth: 1000,//图片的最大宽度
                        //maxImageHeight: 1000,//图片的最大高度
                        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                        //minFileCount: 0,
                        maxFileCount: 1, //表示允许同时上传的最大文件个数
                        enctype: 'multipart/form-data',
                        validateInitialCount: true,
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    });
    
                    //导入文件上传完成之后的事件
                    $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
    
                        var data = data.response;
                        var last = data.lastIndexOf("Upload");
                        EmImg = data.substring(last + 7);
                        //document.getElementById('videoForm').outerHtml = document.getElementById('videoForm').outerHtml;
                        //document.getElementById("videoForm").reset();
                        $("#Modal").modal('hide');
                        $("#imgEmdImg").attr("src", "../FileUpload/Upload/" + EmImg);
                        //alert(EmImg);
                        1.初始化表格
                        //var oTable = new TableInit();
                        //oTable.Init(data);
                    });
                }
                return oFile;
            };

写好弹出模态

在这里插入图片描述

                    </div>
                    <div class="modal-body">
                        <from id="videoForm">
                            <input id="txt_file" type="file">
                        </from>

                    </div>
                    @*<div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭

                            </button>
                            <button id="btnClose" type="button" class="btn btn-primary">
                                返回
                            </button>
                        </div>*@
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

弹出修改头像模态

           //上传头像  
            var oFileInput = new FileInput();
            oFileInput.Init("txt_file", "/Employee/UploadFile");    **注意：这里是导入地址写好你的控制器  和方法名**

            //弹出添加图片模态
            $("#btnImg").click(function () {
                $("#Modal").modal("show");
            });

开始写控制器里的方法这里 string path = Server.MapPath("~/FileUpload/Upload/") + file.FileName; 中~/FileUpload/Upload/为你项目中所保存的图片文件路径文件夹名字即可

#region 图片上传
        /// <summary>
        /// 上传用户头像图片
        /// </summary>
        /// <param name="id">用户的ID</param>
        /// <returns></returns>
        public JsonResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files[0];   
            string path = Server.MapPath("~/FileUpload/Upload/") + file.FileName;
            if (file.FileName.EndsWith(".jpg") || file.FileName.EndsWith(".gif") || file.FileName.EndsWith(".png"))
            {
                file.SaveAs(path);
                return Json(path);
            }
            else
            {
                return Json("no");
            }

        }
        #endregion

在这里插入图片描述