I am trying to upload an image and after uploading i want to show it in the image control. My code is:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUploadTest" runat="server" />
<asp:Button ID="ShowImage" runat="server" Text="Show"
onclick="ShowImage_Click" />
<asp:Image ID="ImageUploaded" runat="server" Height="150px" Width="150px"
ImageUrl="~/images/blankImage.gif" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ShowImage" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
C# code is:
protected void ShowImage_Click(object sender, EventArgs e)
{
Label1.Text = "";
if (FileUploadTest.HasFile)
{
try
{
if (FileUploadTest.PostedFile.ContentType == "image/jpeg")
{
if (FileUploadTest.PostedFile.ContentLength < 102400)
{
string filename = Path.GetFileName(FileUploadTest.FileName);
string imageSavePath = Server.MapPath("~/images/") + filename;
FileUploadTest.SaveAs(imageSavePath);
ImageUploaded.ImageUrl = imageSavePath;
ImageUploaded.Visible = true;
Label1.Text = "Upload status: File uploaded!";
}
else
Label1.Text = "Upload status: The file has to be less than 100 kb!";
}
else
Label1.Text = "Upload status: Only JPEG files are accepted!";
}
catch (Exception ex)
{
Label1.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
}
}
else
{
Label1.Text = "No File !!!";
}
}
But After pressing the show button, the image is uploaded successfully. But the image control got vanished. Can any one help me about it?
Your problem is simply that you have the wrong URL for the image after it is uploaded. Change your code to this:
ImageUploaded.ImageUrl = "~/images/" + filename;
Related
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>
I'm trying to make a simple uploadfile control with ASP.NET,
and it wouldnt work:
Here's my code(.aspx):
<form id="form1" runat="server">
<div>
upload a file now.
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="button1" Text="Upload" runat="server" Width="73px"
onclick="button1_Click" />
<asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="#000099">
</asp:Label>
</div>
</form>
and here's my code behind(.cs):
if(fileupload1.HasFile)
{
try
{
if(fileupload1.PostedFile.ContentType == "image/jpeg")
{
if(fileupload1.PostedFile.ContentLength < 51200000)
{
string filename = Path.GetFileName(fileupload1.FileName);
fileupload1.SaveAs(Server.MapPath("~/img/") + filename);
Label1.Text ="File uploaded successfully!";
}
else
Label1.Text ="File maximum size is 500 Kb";
}
else
Label1.Text ="Only JPEG files are accepted!";
}
catch(Exception exc)
{
Label1.Text = "The file could not be uploaded. The following error occured: "
+ exc.Message;
}
}
the file is not presented in the server..
any thoughts?
when I breakpoint, they all goes valid, the application gets to the code, it all working , but won't save it to the folders.
This may or may not work entirely, but you need to include an enctype attribute in your form.
<form id="form1" runat="server" enctype="multipart/form-data">
If you don't do that, browsers won't transfer the file.
See here: https://developer.mozilla.org/en-US/docs/HTML/Element/form#attr-enctype
change
fileupload1.SaveAs(Server.MapPath("~/img/") + filename);
with
fileupload1.PostedFile.SaveAs(Server.MapPath("~/img/") + filename);
I think the problem lies in these two lines
string filename = Path.GetFileName(fileupload1.FileName);
fileupload1.SaveAs(Server.MapPath("~/img/") + filename);
why are you using
string filename = Path.GetFileName(fileupload1.FileName);
It should be simple
fileupload1.SaveAs(Server.MapPath("~/img/") + fileupload1.FileName);
I am using JQuery to upload files to a folder in my website's root folder via a file upload dialog on a page from the website. This works fine when I run it locally using Casinni but fails when I deploy to a server which hosts the site using IIS 7. Do I need to do anything in IIS to allow such file uploads?
Something along these lines...
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
try
{
FileUpload1.SaveAs("C:\\Uploads\\" +
FileUpload1.FileName);
Label1.Text = "File name: " +
FileUpload1.PostedFile.FileName + "<br>" +
FileUpload1.PostedFile.ContentLength + " kb<br>" +
"Content type: " +
FileUpload1.PostedFile.ContentType;
}
catch (Exception ex)
{
Label1.Text = "ERROR: " + ex.Message.ToString();
}
else
{
Label1.Text = "You have not specified a file.";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Upload Files</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
Text="Upload File" /> <br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label></div>
</form>
</body>
</html>
Another source of acquiring this "skill" http://msdn.microsoft.com/en-us/library/aa479405.aspx
Forget it.... misread the whole thing.
I am working with a fileuploader to upload a picture. However, evertyime i select the file and click the upload button it says that the fileuploader.file returns a value of false and does not run the next lines of code. All i can find is that it has to be in in a seperate form and that the method has to be "post", but that did not fix the problem.
here is my codebehind.
if (FileUploadControl.HasFile)
{
try
{
string filename = Path.GetFileName(FileUploadControl.FileName);
FileUploadControl.SaveAs(Server.MapPath("~/") + filename);
StatusLabel.Text = "Upload status: File uploaded!";
}
catch (Exception ex)
{
StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
}
}
here is my front end code.
<form id="form2" action="CompProfile.aspx" method="post" enctype="multipart/form-data">
<asp:FileUpload id="FileUploadControl" runat="server" />
<asp:Button runat="server" id="UploadButton" text="Upload" onclick="UploadButton_Click" />
<asp:Label runat="server" id="StatusLabel" text="Upload status: " />
</form>
If you are testing with a 0 byte sized file it will return false. Make sure the file actually isn't empty.
Your form should have runat="server" instead of method="post" and action="..."
I am trying to upload an image and after uploading i want to show it in the image control. My code is:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUploadTest" runat="server" />
<asp:Button ID="ShowImage" runat="server" Text="Show"
onclick="ShowImage_Click" />
<asp:Image ID="ImageUploaded" runat="server" Height="150px" Width="150px"
ImageUrl="~/images/blankImage.gif" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ShowImage" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
C# code is:
protected void ShowImage_Click(object sender, EventArgs e)
{
Label1.Text = "";
if (FileUploadTest.HasFile)
{
try
{
if (FileUploadTest.PostedFile.ContentType == "image/jpeg")
{
if (FileUploadTest.PostedFile.ContentLength < 102400)
{
string filename = Path.GetFileName(FileUploadTest.FileName);
string imageSavePath = Server.MapPath("~/images/") + filename;
FileUploadTest.SaveAs(imageSavePath);
ImageUploaded.ImageUrl = imageSavePath;
ImageUploaded.Visible = true;
Label1.Text = "Upload status: File uploaded!";
}
else
Label1.Text = "Upload status: The file has to be less than 100 kb!";
}
else
Label1.Text = "Upload status: Only JPEG files are accepted!";
}
catch (Exception ex)
{
Label1.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
}
}
else
{
Label1.Text = "No File !!!";
}
}
But After pressing the show button, the image is uploaded successfully. But the image control got vanished. Can any one help me about it?
I think you have to set image url to a valid url. Check the result of your Server.MapPath method.
You have to set an URI location to your image.
Morzel