BootStrap--模态框中 上传图片

时间：2024-12-01 19:36:07

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

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

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

//需要添加一个JS 
  <script src="~/Scripts/jquery.form.js"></script>  //用来添加图片的   表单异步提交库
@*模态框开始*@   
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form method="post" id="mm" 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" id="myModalLabel">模态框（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" id="FileUpload1" 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 < )

                        {

                            fileName = Guid.NewGuid().ToString().Substring(, ) + 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")[]);  //必

                $.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" id="ff" enctype="multipart/form-data">

         <div>

             <input type="text" name="tt" id="tt" />

             <input type="file" name="file" id="file" />

             <input type="button" value="submit" id="btn" />

         </div>

         <div id="dd"></div>

    </form>

</body>

</html>




后台：




    public ActionResult aaa()

        {

            return Content(Request.Files[].FileName + "|" + Request.Form[]);

        }


相关文章