'How to change Text of button in FileUpload control and set value to textbox
Hi I want to upload file using c# but want to display as below image.
- I want to change the text of button from default “Browse” to “Upload”.
- When User return to this page I want to show image name he/she previously upload in textbox.
After some search I found its not possible to edit button name and set value for textbox.
So I developed below coding.
.ASPX
<input runat="server" id="File1" type="file" style=" visibility:hidden;" />
<input id="Text1" type="text" runat="server" />
<asp:Button ID="Button1" OnClientClick="fireFileClick()" runat="server" Text="Upload" />
Js
function fireFileClick() {
var objfile = document.getElementById("<%= File1.ClientID %>");
objfile.click();
var objTextBox = document.getElementById("<%= Text1.ClientID %>");
objTextBox.value = objfile.value;
}
.cs
private void SetPicture()
{
string strFileName = System.IO.Path.GetFileName(File1.PostedFile.FileName);
string strExtnt = strFileName.Substring(strFileName.LastIndexOf('.') + 1).ToUpper();
System.Drawing.Image UploadedImage = System.Drawing.Image.FromStream(File1.PostedFile.InputStream);
float UploadedImageWidth = UploadedImage.PhysicalDimension.Width;
float UploadedImageHeight = UploadedImage.PhysicalDimension.Height;
if (UploadedImageWidth < 185 && UploadedImageHeight < 51)
{
}
}
The problem is in .CS im not getting file name and path. the variable strFileName , strExtnt is returning empty. some body guide me.
Solution 1:[1]
You can do something like this.
.Aspx:
<input id="File1" type="file" runat="server" style="visibility: hidden"
onchange="this.form.submit();" />
<input id="Button2" type="button" onclick="fireFileClick();" value="Upload" />
JavaScript:
function fireFileClick() {
document.getElementById("<%= File1.ClientID %>").click();
}
.cs: The same as yours.
Note: feel free to change the way you submit the form in JavaScript, I just used the fastest way. The form will be submitted after file choice by the user.
Solution 2:[2]
Check out this link: ref
Basically uses two input controls, hides the actual input upload control, and applies styling to the non-file upload control. Awesome sauce!
Solution 3:[3]
using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample aspx file is,
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="script/jelly.js" type="text/javascript"></script>
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<form enctype="multipart/form-data" action="#" method="post">
<div class="field">
<label class="file-upload">
<span><strong>Put YOUR TEXT</strong></span>
<%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>
<asp:FileUpload
ID="FileUpload1" name="uploadfile" runat="server"
ondatabinding="FileUpload1_DataBinding" />
</label>
</div>
</form>
</div><!--/ wrap -->
<script src="script/file-upload.js" type="text/javascript"></script>
</form>
</body>
</html>
and CSS file,
body {
}
/*
As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled
*/
.file-upload {
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
/* Cosmetics */
color: #fff;
border: 2px solid #2FA2FF;
background: #6FBEFF;
/* Nice if your browser can do it */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: #000 1px 1px 4px;
}
.file-upload:hover {
background: #2FA2FF;
}
.file-upload.focus {
outline: 2px solid yellow;
}
.file-upload input {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 70px;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 1.75em arial,sans-serif;
}
.file-upload span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: .45em;
}
/* Adjust the button size */
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }
.file-upload-status {
margin-left: 10px;
vertical-align: middle;
padding: 7px 11px;
font-weight: bold;
font-size: 16px;
color: #888;
background: #f8f8f8;
border: 3px solid #ddd;
}
you can download sample project at changedfileuploadbutton text
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | ?????? |
Solution 2 | devjc |
Solution 3 |