preview a picture from my hard disk before upload it
-
Hello, I am trying to preview a picture from my hard disk before upload it to the server but I didn't success, no error occured but no picture is shown. Please help here is the code Thank you. // width to resize large images to var maxWidth=100; // height to resize large images to var maxHeight=100; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="box_icons.jpg"; function preview(what) { var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break; globalPic=new Image(); if (i<fileTypes.length) globalPic.src=source; else { globalPic.src=defaultPic; alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges() { var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End -->
Test it by locating a valid file on your hard drive:
Eric H.
-
Hello, I am trying to preview a picture from my hard disk before upload it to the server but I didn't success, no error occured but no picture is shown. Please help here is the code Thank you. // width to resize large images to var maxWidth=100; // height to resize large images to var maxHeight=100; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="box_icons.jpg"; function preview(what) { var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break; globalPic=new Image(); if (i<fileTypes.length) globalPic.src=source; else { globalPic.src=defaultPic; alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges() { var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End -->
Test it by locating a valid file on your hard drive:
Eric H.
Unable to find problem in your code since it is too big. I did this by simply specifying local image path to image tag src using javascript. Try that method.
-
Unable to find problem in your code since it is too big. I did this by simply specifying local image path to image tag src using javascript. Try that method.
Hello, I simplify the problem, please see the following code: // <!CDATA[ function Button1_onclick() { document.getElementById("img1").src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg" } // ]]>
Thank you much
Eric H.
-
Hello, I simplify the problem, please see the following code: // <!CDATA[ function Button1_onclick() { document.getElementById("img1").src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg" } // ]]>
Thank you much
Eric H.
ayeleteric wrote:
C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg
In javascript
\will be escaped. So use\\instead of\. I think this will solve your problem.
-
Hello, I am trying to preview a picture from my hard disk before upload it to the server but I didn't success, no error occured but no picture is shown. Please help here is the code Thank you. // width to resize large images to var maxWidth=100; // height to resize large images to var maxHeight=100; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="box_icons.jpg"; function preview(what) { var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break; globalPic=new Image(); if (i<fileTypes.length) globalPic.src=source; else { globalPic.src=defaultPic; alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges() { var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End -->
Test it by locating a valid file on your hard drive:
Eric H.
Hi Eric, try this link http://javascript.internet.com/forms/image-upload-preview.html[^] << >>
-
ayeleteric wrote:
C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg
In javascript
\will be escaped. So use\\instead of\. I think this will solve your problem.
Thank you but it doesn't work too.
Eric H.
-
Hi Eric, try this link http://javascript.internet.com/forms/image-upload-preview.html[^] << >>
Thank you but this is the source that make me problem (see my first post)
Eric H.
-
Thank you but this is the source that make me problem (see my first post)
Eric H.
what problem you got with the example script? any js error? you try to run in FF to see more detail with js error.. << >>
-
what problem you got with the example script? any js error? you try to run in FF to see more detail with js error.. << >>
- What is FF 2) I do not get any error but when I am selecting a picture from my hard disk using the dialog box, no picture is previewed Thank you
Eric H.
-
- What is FF 2) I do not get any error but when I am selecting a picture from my hard disk using the dialog box, no picture is previewed Thank you
Eric H.
FF is Firefox browser... << >>
-
- What is FF 2) I do not get any error but when I am selecting a picture from my hard disk using the dialog box, no picture is previewed Thank you
Eric H.
As i used this before..and it's working well..so can you send me your html page to see what problem? << >>
-
As i used this before..and it's working well..so can you send me your html page to see what problem? << >>
Thank you for your help, You can copy the code from my first post
Eric H.
-
Thank you for your help, You can copy the code from my first post
Eric H.
-
As you didn't use the "Ignore HTML" option when you posted the code, he can't use it. There are several parts of the code that doesn't show up in the message.
--- single minded; short sighted; long gone;
Thank you Guffa, Here is my code: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> // width to resize large images to var maxWidth=100; // height to resize large images to var maxHeight=100; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="box_icons.jpg"; /***** DO NOT EDIT BELOW *****/ function preview(what) { var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break; globalPic=new Image(); if (i<fileTypes.length) globalPic.src=source; else { globalPic.src=defaultPic; alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges() { var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End -->
Test it by locating a valid file on your hard drive:
Eric H.
-
As you didn't use the "Ignore HTML" option when you posted the code, he can't use it. There are several parts of the code that doesn't show up in the message.
--- single minded; short sighted; long gone;
As I wrote upstair, I simplify the problem to a short code. Can you try to help me on this code. I think it will help me to the big one too. The problem is that I do not see the picture. // <!CDATA[ function Button1_onclick() { document.getElementById("img1").src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg" } // ]]>
Thank you, Eric H.