Here's a little thing i want to achieve. I have an asp.net FileUpload and a textbox. When a user clicks the fileUpload and selects a picture from his/her computer/device, i want the image name to be immediately displayed in a textbox before submitting . Here is what i have tried
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static">
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('txtImage').val(filename);
});
It still cant get it displayed. wHAT AM I MISING PLEASE
you are missing # in $("txtImage"). This should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('#txtImage').val(filename);
});
});
</script>
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"></asp:TextBox>
TextBox txtImage does not have a closing tag.
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"/>
Related
How can I show the image in asp:Image control after the image is selected in asp:FileUpload Control without any Button Click ?
Here is my Code :
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" ID="fileupload_edu" />
I've gone through many links but got no idea because i don't want any button click.
I've also seen :http://www.aspforums.net/Threads/933229/Upload-image-using-FileUpload-and-display-in-Image-control-in-ASPNet/ but same problem i.e. button click .
Can anyone please help me.
Thanks in advance.
You can add it using javascript.
<script>
function img() {
var url = inputToURL(document.getElementById("<%=fileupload_edu.ClientID %>"));
document.getElementById("<%=img_edu.ClientID %>").src = url;
}
function inputToURL(inputElement) {
var file = inputElement.files[0];
return window.URL.createObjectURL(file);
}
</script>
You Controls
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" ID="fileupload_edu" ClientIDMode="Static" onchange="img();" />
you have to call change event.
<script>
$(document).ready(function () {
$("#<%= fileupload_edu.ClientID%>").change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("#<%= img_edu.ClientID%>").fadeIn("slow", function () {
$(this).attr("src", e.target.result).fadeIn();
})
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
Try this, you need an onchange event to detect when the file is loaded
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" onchange="LoadImg()" ID="fileupload_edu" />
Then use this function to show the selected file
function loadImg(element) {
var tgt = element.target || window.event.srcElement, files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("<%=img_edu.ClientID%>").src = fr.result;
}
fr.readAsDataURL(files[0]);
}
else {
}
}
I have login form
Login form
I want to show password when check box is checked. I write below code
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList runat="server" ID="showHidePassword">
<asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
And try some JQuery code
$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});
Please help.
You can try changing the type attribute on change event, you can do something like this as an example:
$(function() {
$("#showHidePassword").on("change", function() {
var checked = this.checked;
$(this).siblings('input').attr('type', function() {
return checked ? "text" : "password";
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="showHidePassword">show password
<br>
<input type="password">
Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList.
And write below code in head section.
$(function () {
$("#showHidePassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
That's it.
You can try this
HTML
<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password
JQUERY
$(document).ready(function() {
$('.chk').on('click', function() {
if ($('.chk').prop("checked")) {
$('.pwd').prop('type', 'text');
} else {
$('.pwd').prop('type', 'password');
}
});
});
kindly check
https://jsfiddle.net/vzuLn88j/
I have 2 textboxes turn into jquery datepickers and some folder names like 09-13-2014, 09-14-2014 and 09-15-2014, how can I get all folder names from the selected dates on button click and place it on a treeview? I'm new to this, not yet familliar on the back end coding.
Here's my datepickers:
<script type="text/javascript">
$(function () {
$("[id$=txtDate1]").datepicker({
dateFormat: 'mm-dd-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'Images/calendar.png'
});
});
</script>
<p>
From: <asp:TextBox ID="txtDate1" runat="server" ReadOnly = "true"></asp:TextBox>
To:<asp:TextBox ID="txtDate2" runat="server" ReadOnly = "true"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" />
</p>
I supposed that you datepicker working fine and it showing the calender.
<p>
From:
//you should delete ReadOnly = "true" on textboxes
<asp:TextBox ID="txtDate1" runat="server"></asp:TextBox>
To:<asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" OnClick="Button1_Click" />
</p>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
on code behinde write this codes. you can go to codebehind by rightclick on your page and then selecting view code.
protected void Button1_Click(object sender, EventArgs e)
{
var start = Convert.ToDateTime(txtDate1.Text);
var end = Convert.ToDateTime(txtDate2.Text);
if (end < start)
return;
var folderNamelst = GetListOfExsistingFolderName(start, end);
AddNodes(folderNamelst);
}
private IEnumerable<string> GetListOfExsistingFolderName(DateTime startDate, DateTime endTime)
{
var mainFolderPath = Server.MapPath("~/Folders");
var folderNamelst = new List<string>();
var day = startDate;
do
{
if (Directory.Exists(mainFolderPath + "\\" + day.ToString("MM-dd-yyyy")))
folderNamelst.Add(day.ToString("MM-dd-yyyy"));
day = day.AddDays(1);
} while (day <= endTime);
return folderNamelst;
}
private void AddNodes(IEnumerable<string> data)
{
TreeView1.Nodes.Clear();
var root = new TreeNode("Folders");
foreach (var d in data)
{
var treechild = new TreeNode(d);
root.ChildNodes.Add(treechild);
}
TreeView1.Nodes.Add(root);
}
I got stuck in JavaScript validation in product adding form.
In that page I have file upload control to upload product image. I am not getting how to validate that using JavaScript.
If image is not uploaded to that control I want to display Upload Image message in Label.
How to accomplish this? Please help me.
The script I have written is:
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "")
{
document.getElementById("lblFileUploadImg").innerHTML = "<font color='red'>
Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else
{
document.getElementById("lblFileUploadImg").innerHTML = "";
}
The control I have used is:
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" >
With jQuery you could simply do this:
$('#myFile').bind('change', function() {
if(this.files[0].size>...){
alert('File is too big');
};
});
maybe this is what you are looking for:
$("input:file").change(function () {
if ($(this).val() !== "") {
var ul_file = $(this).val();
var extension = ul_file.substr((ul_file.lastIndexOf('.') + 1));
var accepted_file_endings = ["jpg", "jpeg", "bmp", "gif", "tif", "png"];
extension = extension.toLowerCase()
if ($.inArray(extension, accepted_file_endings) !== -1) {
...
You can get validate file uploading using JavaScript like this.
<script type="text/javascript">
function validate() {
var uploadcontrol = document.getElementById('<%=FileUploadImg.ClientID%>').value;
//Regular Expression for fileupload control.
var reg = /(.doc|.docx|.pdf)$/i;
if (uploadcontrol.length > 0)
{
//Checks with the control value.
if (reg.test(uploadcontrol))
{
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='green'>Upload Image File</font>";
return true;
}
else
{
//If the condition not satisfied shows error message.
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "Error while upload image";
return false;
}
}
} //End of function validate.
</script>
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" />
<asp:Button runat="server" Text="Upload" ID="btnupload" onclientclick="return validate();" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Validate() {
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "") {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='red'>Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUploadImg" runat="server" />
<asp:Label ID="lblFileUploadImg" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Validate();" />
</div>
</form>
</body>
</html>
Trying to reload an iframe after C# has modified its attributes. Here's the page:
<script type="text/javascript">
function reloadFrame(Map) {
document.getElementById(Map).contentDocument.location.reload(true);
}
</script>
<asp:TextBox ID="TextBox1" placeholder="Zip code" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Find locations" onclick="Button1_Click" />
<iframe id="Map" runat="server"></iframe>
And when the button is clicked it runs this:
var zipCode = TextBox1.Text;
Map.Attributes.Add("src", "https://www.google.com/maps/preview#!q=gnc+near%3A+" + zipCode);
browser.Document.InvokeScript("reloadFrame", new[] { "Map" });
However the line to reload the iframe doesn't work. Any ideas?
How about setting the src for the iFrame via inline code?
<iframe id="Map" runat="server" src='<%= (TextBox1.Text == "" ? "" : "https://www.google.com/maps/preview#!q=gnc+near%3A+" + zipCode) %>'></iframe>