Load Image with Javascript from ASP.NET FileUpload control
I am trying to load an asp image box <asp:Image ID="imgPicture" width="200" height="200" runat="server" />
with an image after a user has selected one using the asp.net fileupload control <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
HTML
<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
开发者_运维技巧
Javascript
<script type="text/javascript">
function LoadImage(path, img) {
imgPrev = document.images[img];
imgPrev.src = path;
}
</script>
The image will not load in the imgPicture control. Also I noticed that by adding an alert to the javascript function to alert the path and image, that the path is C:\fakepath\ImageName.jpg
. I am unsure why it says fakepath.
Any help is appreciated. Also note that this project has a C# code file behind it.
After all of your input, I have changed my FileInput control code to be as follows:
<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>
I then added a test to the Page.OnLoad event to determine if the file is ready to be uploaded.
if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();
Then I allowed the UploadImage() method to upload the image, store it, and then set the url of the imagebox to the uploaded image's url.
Thank you all for your help and input. Also, I appreciate the jQuery ideas. In this instance I just needed something quick and dirty to get the job done.
You file is not uploaded until you do a post back, it sounds like your only browsing to the file and then trying to get a thumbnail before you post back/upload the image.
ASP.Net (HTML) CODE :
<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX" />
JAVASCRIPT CODE :
function showImage()
{
// Get File Upload Path & File Name
var file = document.getElementById("FileUpload1");
// Set Image Url from FileUploader Control
document.getElementById("Image1").src = file.value;
// Display Selected File Path & Name
alert("You selected " + file.value);
// Get File Size From Selected File in File Uploader Control
var inputFile = document.getElementById("FileUpload1").files[0].size;
// Displaty Selected File Size
alert("File size: " + inputFile.toString());
}
I think That can Help You. its perfectly run on my pc.
精彩评论