CODEWITHSUNDEEP
c#jqueryasp.nethtmljquery-file-upload
Ali Akyıldırım
Ali Akyıldırım

Reputation: 111

How to get FileName and upload file in asp.net JQuery without using File Upload

I am trying to upload image file(s) for my project with bootstrap jquery using the HTML5 input type="file" tag in ASP.NET 3.5. I tried so many different methods to do it without using File Upload. However, I couldn't do it with success.

I need your help please. How can I use "input type="file" … " instead of asp:FileUpload

Thanks in advance.

.aspx design page is like this:

<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <!-- image-preview-filename input [CUT FROM HERE]-->
    <div class="input-group image-preview">
        <input type="text" class="form-control image-preview-filename" disabled="disabled" />
        <!-- don't give a name === doesn't send on POST/GET -->
        <span class="input-group-btn">
            <!-- image-preview-clear button -->
            <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                <span class="glyphicon glyphicon-remove"></span> Temizle
            </button>                 

            <div class="btn btn-default image-preview-input">
                <span class="glyphicon glyphicon-folder-open"></span><span class="image-preview-input-title">
                    Choose File</span>
                <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
                <!-- rename it -->
            </div>
        </span>
    </div>
    <!-- /input-group image-preview [TO HERE]-->
</div>
/div>

<div class="w3-container w3-padding">
<table width="100%">
<tr>
<td width="16%">
<td width="25%">
<asp:LinkButton ID="resimYukle" runat="server" class="w3-btn w3-theme" 
    onclick="resimYukle_Click">
<span aria-hidden="true" class="fa fa-pencil"></span> Save</asp:LinkButton>
<td width="59%">    
                        </td>        
</td></td></tr></table>

</div>

Screenshot is like this:

Uploading Page Screenshot

Upvotes: 2

Views: 2176

Answers (1)

Usman
Usman

Reputation: 4703

There are two ways to get file name in server side you can use asp controls or you can use bootstrap controls and use runat="server" e.g

   <input type="file" id="filebtn" accept="image/png, image/jpeg, image/gif" runat="server" name="input-file-preview" />

and in cs file use properties as 

 var name= filebtn.PostedFile.FileName;

or InputStream or SaveAs

and in asp you can use asp controls but apply css class

 <asp:FileUpload ID="fileupload" CssClass="applyclass" runat="server" />

Upvotes: 1

Related Questions