ASP.NET C#通过Twitter Bootstrap 3.0使用模式弹出窗口上载文件

你好，我正在使用引导的弹出模式为用户上传图像。这就是它的样子

它的工作原理是用户必须单击按钮才能显示模式弹出窗口。之后，用户将不得不点击上传图像和图片预览将出现

像这样。。

问题是，一旦用户在单击“文件上载”按钮后选择了文件，页面就会自动刷新。因此，强制用户再次单击按钮以弹出模式。幸运的是，用户单击按钮后会出现预览图片

这是源代码 test.aspx：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="fileuploadpreview.test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="//code.jquery.com/jquery.js"></script>



<script language="javascript" type="text/javascript">

    function UploadFileNow() {

        var value = $("#FileUpload2").val();

        if (value != '') {

            $("#form1").submit();

        }

    };
</script>

    <div>

        <h2>Upload file without Submit button</h2>

        <asp:Button ID="btn_test" runat="server" Text="Test" data-target="#myModal" data-toggle="modal" CssClass="btn btn-primary" />



        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <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 title</h4>
            </div>
            <div class="modal-body">
            <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />

                Select file and upload will start automatically

                <h5>Change Profile Picture</h5>             


                <asp:FileUpload ID="FileUpload2" runat="server" ClientIDMode="Static" onchange="UploadFileNow()"/>

                <br />
                <br />

                <asp:Label ID="lbl_profilepicturePreview" runat="server" Text="The preview of your updated profile picture: "></asp:Label>
                <asp:Image ID="img" runat="server" />
                <br />
                <asp:Label ID="lbl_profilepicture" runat="server"></asp:Label>
                <br />

            </div>
            <div class="modal-footer">
                <asp:Button ID="btn_profilepicturesubmit" runat="server" CssClass="btn btn-primary" Text="Save Profile Picture" />                   
            </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    </div>

</asp:Content>

---

嗯，试着把这个添加到你的页面中

  <script>
   $('#FileUpload2').click(function(event){
    event.preventDefault()});
  </script>

$（'#FileUpload2'）。单击（函数（事件）{
event.preventDefault（）}）；

你好，谢谢。它工作正常。但是我如何在不刷新页面的情况下显示图片呢？你知道图片上传后的url吗？如果是，则添加

$（“#img”）。附加（“”）

to

UploadFileNow（）

Oh顺便说一句，当我添加一个花括号和括号时，代码无法工作。像这样

$（'#FileUpload2'）。单击（函数（事件）{event.preventDefault（）}）
  <script>
   $('#FileUpload2').click(function(event){
    event.preventDefault()});
  </script>