BootStrap--模态框中上传图片

2024-01-02 01:24•数据库•阅读 4012

问题：在模态框中添加图片并不会得到你上传图片的名称，无法存到数据

下面介绍两个方法，都是可以得到图片名称的。

第一种前面如何加载模态框就不写了，上篇有写，这里只是为得到图片写的

//需要添加一个JS 
  <script src="~/Scripts/jquery.form.js"></script>  //用来添加图片的   表单异步提交库
@*模态框开始*@   
<div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <form method="post"  enctype="multipart/form-data">   //form 表单需要，
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" >模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
  <div class="control-group">
                 <label class="control-label" for="FileUpload1">上传图片</label>
                 <div class="controls">
                 <input class="input-file uniform_on"  name="FileUpload1" type="file">
                 </div>
             </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</from>
</div>@*模态框结束*@
JS代码：

//添加 到数据库
$("#sum").click(function () {
//模态框中添加图片 两种做法
ajaxSubmit是个方法，引用了form.js这个库，此方法才有效
   $("#mm").ajaxSubmit({
       url: "@Url.Action("AddPric")",  //访问这个方法用来得到图片名称
       type: "post",
       success: function (data) {
       img = data;  //data就是名称了
        alert(data);
}）；

后台：

       /// <summary>
        /// 图片名称
        /// </summary>
        /// <returns></returns>
        public ActionResult AddPric()
        {
            if (Request.Files["FileUpload1"] != null)
            {
                string savePath = Server.MapPath("~/Content/img");//建立虚拟路径，需要存在你的项目中的
                //Request.Files["FileUpload"].FileName      上传文件的完整路径
                //string name = Request.Files["FileUpload1"].ContentType;  //image/jpeg
                string ext = Path.GetExtension(Request.Files["FileUpload1"].FileName); //获取上传文件的扩展名     
                string fileName = "";
                switch (ext)
                {
                    case ".jpg":
                    case ".jpeg":
                    case ".png":
                    case ".gif":
                    case ".bmp":
                    case ".rar":
                    case ".zip":
                        if (Request.Files["FileUpload1"].ContentLength < 1024000)
                        {
                            fileName = Guid.NewGuid().ToString().Substring(0, 8) + ext;   //新的图片名称 Guid一个36位的随机数
                            Request.Files["FileUpload1"].SaveAs(savePath + "\\" + fileName); //保存到项目中
                        }
                        break;
                }
                return Content(fileName);   //返回图片名称
            }
            else
            {
                return Content("");
            }
        }

第二种：

<html>
<head>  
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>    //这两个JS需要引用     模板里面的js库
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>     
        $(function () {          
            $("#btn").click(function () {
                //将表单封装成一个表单数据对象
                var formData = new FormData($("#ff")[0]);  //必
                $.ajax({
                    url: \'@Url.Action("aaa")\',
                    type: "POST",
                    data: formData,
                    contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 
                    processData: false, //必须false才会自动加上正确的Content-Type
                    success: function (data) {
                        alert(data)
                    }
                });

            });
        });

    </script>
</head>
<body>

    @*//注意：可以将表单代码放入模态框中，整个提交过程不会刷新页面，使用AJAX将文件提交到服务器端，之后的处理和一般上传没有区别*@
    <form action="/" method="post"  enctype="multipart/form-data">
         <div>
             <input type="text" name="tt"  />
             <input type="file" name="file"  />
             <input type="button" value="submit"  />

         </div>
         <div ></div>
    </form>
</body>
</html>

后台：

    public ActionResult aaa()
        {
            return Content(Request.Files[0].FileName + "|" + Request.Form[0]);
        }

BootStrap--模态框中 上传图片

相关推荐

jsp bootstrap 模态框数据回显

Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

BootStrap中模态框踩坑

Bootstrap之模态框实现图片预览

Bootstrap3 模态框点击无效

bootstrap模态框引发页面抖动

bootstrap弹出模态框

Bootstrap-Modal模态框插件

BootStrap--模态框中上传图片