I needed a FileUpload which would look almost same in all browsers i.e show file input field in chrome as well. So i am using a custom FileUpload With this code..

CSS

    <style type="text/css">



        #FileUpload {
    position:relative;
            top: -4px;
            left: 0px;
        }

#BrowserVisible {
    position: absolute;
    top: -15px;
    left: 0px;
    z-index: 1;
    background:url(upload.gif) 100% 0px no-repeat;
    height:26px;
    width:240px;
}

#FileField {
    width:155px;
    height:22px;
    margin-right:85px;
    border:solid 1px #000;
    font-size:16px;
}

#BrowserHidden {
    position:relative;
    width:240px;
    height:26px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

    </style>

Javascript

<script src="zoom/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $('.custom-upload input[type=file]').change(function () {
        $(this).next().find('input').val($(this).val());
    });

</script>

HTML

<div id="FileUpload">
    <input type="file" size="24" id="BrowserHidden" runat="server" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible"><input type="text" id="FileField" runat="server" /></div>

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" style="height: 26px" />
</div>

With asp server control it was as simple as

Stream fs = file_upload.PostedFile.InputStream;
                BinaryReader br = new BinaryReader(fs);
                Byte[] bytes = br.ReadBytes((Int32)fs.Length);

I needed a FileUpload which would look almost same in all browsers i.e show file input field in chrome as well. So i am using a custom FileUpload With this code..

CSS

    <style type="text/css">



        #FileUpload {
    position:relative;
            top: -4px;
            left: 0px;
        }

#BrowserVisible {
    position: absolute;
    top: -15px;
    left: 0px;
    z-index: 1;
    background:url(upload.gif) 100% 0px no-repeat;
    height:26px;
    width:240px;
}

#FileField {
    width:155px;
    height:22px;
    margin-right:85px;
    border:solid 1px #000;
    font-size:16px;
}

#BrowserHidden {
    position:relative;
    width:240px;
    height:26px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

    </style>

Javascript

<script src="zoom/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $('.custom-upload input[type=file]').change(function () {
        $(this).next().find('input').val($(this).val());
    });

</script>

HTML

<div id="FileUpload">
    <input type="file" size="24" id="BrowserHidden" runat="server" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible"><input type="text" id="FileField" runat="server" /></div>

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" style="height: 26px" />
</div>

With asp server control it was as simple as

Stream fs = file_upload.PostedFile.InputStream;
                BinaryReader br = new BinaryReader(fs);
                Byte[] bytes = br.ReadBytes((Int32)fs.Length);

• c#
• javascript
• html
• asp
• css

1 Answer 1

Assuming your markup has something like this:

<input type="file" id="file1" />
<br />
<input type="file" id="file2" />

In your code-behind event handler, you can get at the file like so:

HttpPostedFile file = Request.Files["file1"]; // Gets contents passed in file1 element
HttpPostedFile file2 = Request.Files["file2"]; // Gets contents passed in file2 element
Stream uploadFileStream = file.InputStream;
// TODO:  Add code to read the streams