How to get popup window with multiple file uploads in asp.net vb

Question

Hi I want to display popup window with multiple fileupload

when I click UploadDocument button I have tried this but I dint get the correct one it displays next to Upload Document button but I want to get when I click UploadDocument button please help me to do this.

<form action="" method="post" enctype="multipart/form-data" name="form" id="form1">
<asp:Button ID="btnUpload" runat="server" Text="Upload Document" />
<label>
    upload file
    <input type="file" multiple="true" />
</label>
<label>
    <input type="submit" name="button" id="button" value="Submit" />
</label>
</form>

Thanks in advance!!

you can use `jquery modal popup` functionality inside that you can merge your `file uploads` — Nad, Dec 28 '15 at 06:56
I don't want to merge file uploads I want to get fileuploads buttons when I click uploaddocument as a popup window — avi, Dec 28 '15 at 07:00
you need `multiple fileupload`, can you specify how much you need ?? — Nad, Dec 28 '15 at 07:12
in 1st row>>>Choose file (textbox) Browse Button in 2nd row>>>Destination folder (textbox) Choose Folder confirmation buttons>>>>Ok Cancel the above box should popup when I click Upload Document button — avi, Dec 28 '15 at 07:46

Nad · Answer 1 · 2015-12-28T07:47:27.307

0

For your requirement, I have created a demo using Modal Popup

Have a look below

 $(function () {
            modalPosition();
            $(window).resize(function () {
                modalPosition();
            });
            $('.openModal').click(function (e) {
                $('.modal, .modal-backdrop').fadeIn('fast');
                e.preventDefault();
            });
            $('.close-modal').click(function (e) {
                $('.modal, .modal-backdrop').fadeOut('fast');
            });
        });
        function modalPosition() {
            var width = $('.modal').width();
            var pageWidth = $(window).width();
            var x = (pageWidth / 2) - (width / 2);
            $('.modal').css({ left: x + "px" });
        }

.modal-backdrop
        {
            background-color: rgba(0, 0, 0, 0.61);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }
        .modal
        {
            width: 500px;
            position: absolute;
            top: 25%;
            z-index: 1020;
            background-color: #FFF;
            border-radius: 6px;
            display: none;
        }
        .modal-header
        {
            background-color: #333;
            color: #FFF;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
        }
        .modal-header h3
        {
            margin: 0;
            padding: 0 10px 0 10px;
            line-height: 40px;
        }
        .modal-header h3 .close-modal
        {
            float: right;
            text-decoration: none;
            color: #FFF;
        }
        .modal-footer
        {
            background-color: #F1F1F1;
            padding: 0 10px 0 10px;
            line-height: 40px;
            text-align: right;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top: solid 1px #CCC;
        }
        .modal-body
        {
            padding: 0 10px 0 10px;
        }

<asp:Button ID="btn_open" runat="server" Text="Open Modal" CssClass="openModal" />
    <div class="modal">
        <div class="modal-header">
            <h3>
               File Upload <a class="close-modal" href="#">&times;</a></h3>
        </div>
        <div class="modal-body">
            <p>
                <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
        </div>
        <div class="modal-footer">
            <asp:Button ID="btn_close" runat="server" Text="Upload Document" CssClass="modalOK close-modal" />
        </div>
    </div>
    <div class="modal-backdrop">
    </div>

Dont forget to add the Jquery Plugin

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Let me know if you have any doubts.

Hope that helps you

Have a look at the below screenshot

edited Dec 28 '15 at 07:47

answered Dec 28 '15 at 07:21

Nad

4,605
11
71
160

hi what you sent is correct but it should display as popup window – avi Dec 28 '15 at 07:55
on clicking of button, it is opening the `popup window` only. Did you added the basic plugin of `jquery` ?? `` – Nad Dec 28 '15 at 07:57
In between of jquery only I added code what you have sent – avi Dec 28 '15 at 08:11
the HTML parts needs to be added after `form` tag and jquery to be added on the Top of javascript code – Nad Dec 28 '15 at 08:12
if you don't mind can you send me the screen shot what is the result if you run the above code even when I run in the fiddle got the same result – avi Dec 28 '15 at 08:15
yes I did the same thing and .modalpopup where to add? – avi Dec 28 '15 at 08:16
actually it will not run in the jsfiddle as it is aspx control, I will give you the screen shot of my code – Nad Dec 28 '15 at 08:16
I cant see anything its two small – avi Dec 28 '15 at 08:20
its just simple html, css and js has to be added. What especially are you not able to see ? – Nad Dec 28 '15 at 08:21
I have added the code here https://jsfiddle.net/a7ajgr2n/ u just simply need to copy paste and test it accordingly. I am going for lunch now will be back in 20 mins. Do let me know if it does not works for you – Nad Dec 28 '15 at 08:23
the screen shot what you sent is very small If I enlarge its very blur cant see anything – avi Dec 28 '15 at 08:24
i dont know what did you tried, can you copy paste your code and give the link – Nad Dec 28 '15 at 09:04
can you come on chat here for discussion http://chat.stackoverflow.com/rooms/99104/importand-discussion – Nad Dec 28 '15 at 09:13
ohh sorry I don't have 20 reputations to chat there – avi Dec 28 '15 at 09:16
refresh your page and try now..! – Nad Dec 28 '15 at 09:18
please access my request – avi Dec 28 '15 at 09:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99105/discussion-between-coder-and-avi). – Nad Dec 28 '15 at 09:24
click the above link and come on chat – Nad Dec 28 '15 at 09:24

How to get popup window with multiple file uploads in asp.net vb

1 Answers1