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

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

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

//需要添加一个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[]);

        }


												


											
BootStrap--模态框中 上传图片的更多相关文章
	

    
						
  1. 解决bootstrap模态框内输入框无法获取焦点
		
    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
    
		
    2. 
						
  2. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决
		
    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...
    
		
    3. 
						
  3. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
		
    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...
    
		
    4. 
						
  4. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题
		
    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...
    
		
    5. 
						
  5. Bootstrap 模态框（Modal）插件
		
    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
    
		
    6. 
						
  6. Bootstrap 模态框在用户点击背景空白处时会自动关闭
		
    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
    
		
    7. 
						
  7. 去除bootstrap模态框半透明阴影
		
    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
    
		
    8. 
						
  8. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
		
    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示  ...
    
		
    9. 
						
  9. 使用bootstrap模态框实现浮动层
		
    authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals ...
    
		
    10. 
				

	


随机推荐
	

    
									
  1. Underscore.js  常用类型判断以及一些有用的工具方法
			
    1. 常用类型判断以及一些有用的工具方法 underscore.js 中一些 JavaScript 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的 ...
    
			
    2. 
						
  2. state模式理解
			
    state模式应用场景 条件判断很多的情况 比如有很多if else语句:switch case语句等等. 如果以后业务越来越复杂,条件判断有100多个,每种条件的处理逻辑很复杂,不止一个业务逻辑会重 ...
    
			
    3. 
						
  3. 类名.this与类名.class
			
    1..当在内部类中使用this指的就是内部类的对象, 为了访问外层类对象,就可以使用外层类名.this来访问. 2.在java中,每个class都有一个相应的Class对象,当编写好一个类,编译完成后 ...
    
			
    4. 
						
  4. PHP语言中使用JSON
			
    原文地址:http://www.ruanyifeng.com/blog/2011/01/json_in_php.html 在PHP语言中使用JSON 目前,JSON已经成为最流行的数据交换格式之一,各 ...
    
			
    5. 
						
  5. 关于华为交换机bpdu enable. ntdp enable. ndp enable解析
			
    华为5300初始状态下每个口子都有,bpdu enable. ntdp enable. ndp enable.不是很明白什么意思,有什么样的用途. BPDU是网桥协议数据单元(Bridge Proto ...
    
			
    6. 
						
  6. 快速幂：quickpow
			
    众所周知,快速幂是优化对数的次方运算的最普遍手段.在学习快速幂的思想时,其分治思想容易让大家用简单的递归实现. 但其实,除了递归之外,更好的方法会是简单的 WHILE循环.下面贴代码: #includ ...
    
			
    7. 
						
  7. 三种实现PHP伪静态页面的方法（转）
			
    PHP伪静态写法--其一 伪静态又名:URL重写 以下列举了三种方法. 方法一: 比如这个网页 http://www.2cto.com /soft.php/1,100,8630.html 其实处理的脚 ...
    
			
    8. 
						
  8. 项目设计&重构&性能优化
			
    漫谈项目设计&重构&性能优化 重构的好处:重构能够改进软件设计,随着项目需求的变更,项目体积的变大早已与最初的设计大相径庭,代码结构变得凌乱.复杂,如果不进行重构,则很难添加新的功能. ...
    
			
    9. 
						
  9. Java中关于String的split(String regex, int limit) 方法
			
    今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...
    
			
    10. 
						
  10. PCB设计备忘录
			
    在PCB设计过程中,常常有很多细节只有在实践中才能体会到其重要性,本人记性不好,索性把相关的注意点记录下来,也顺便希望能够给读者朋友们一些帮助. 接插件以及连接器比较常用的针脚之间间距有2.54mm/ ...
    
			
    11.