ASP.NET C# 使用 Twitter Bootstrap 3.0 的模式弹出窗口上传文件

Question

您好，我正在使用引导程序的弹出模式让用户上传图像。就是这个样子。。

它的工作原理是用户必须单击按钮才能出现模式弹出窗口。之后，用户必须点击上传图片，图片预览就会出现。

像这样..

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

这里是源代码 测试.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>

下一个test.aspx.cs：

using System.IO;
using SD = System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System;
using System.Web;

namespace fileuploadpreview
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack && FileUpload2.PostedFile != null)
            {

                if (FileUpload2.PostedFile.FileName.Length > 0)
                {

                    Session["Image"] = FileUpload2.PostedFile;
                    Stream fs = FileUpload2.PostedFile.InputStream;
                    BinaryReader br = new BinaryReader(fs);
                    byte[] bytes = br.ReadBytes((Int32)fs.Length);
                    string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
                    img.ImageUrl = "data:image/png;base64," + base64String;

                }

            }
        }
    }
} 

Answer 1

嗯，尝试将其添加到您的页面中

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