Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How do I get the images links after they've been uploaded?

    I'm a php developer and have come across a mind boggling issue involving Javascript. I'm uploading images to a server without issue. They are being returned to the page in thumbnails.

    The script works great but I can't get the links for the images that I've uploaded.

    If I right click and view the image I can see the link on the server. How would I go about getting that link? If I look at the source code the link isn't present. Its a dynamically generated link for the uploaded image.

    Being completely unfamiliar with Javascript I'm hoping someone here can help me out.

    Here's the code I'm working with:

    Code:
    <input type="file" name="u" size="40" style="width:500px"/><br/>
    			
                </div>
    	<style type="text/css">
    		.flashUpload {width : 151px;}
    	</style>
    
    <script>
    		document.write('<script type="text/javascript" language="JavaScript" src="mytoken"' + '><' + '/script>');
    		
    		function processUrlResponse(pic,error,window) {
    			if ( window.parent != 'undefined' )
    				$(window).remove();
    		}
    		
    		var errorTexts = {
    				'ERROR' :'There was an error uploading your picture.',
    				'FS' : 'The file size of the picture you attempted to add is too large. Please reduce your picture\'s file size before adding it again.',
    				'FP' : 'You specified a picture file that could not be found on your computer.',
    				'ME' : 'There was an error uploading your picture. ',
    				'FC' : 'The content of your picture file is corrupted.',
    				'FF' : 'There was a problem with the format of your picture file.',
    				'SD' : 'There was a problem connecting to Picture Services.'
    				};
    		var popupMsg =
    				'<CENTER class="modal">' +
    					'<TABLE height=210 cellSpacing=0 cellPadding=0 width=240 border=1>' +
    					'<TR vAlign=top align=left><TD>' +
    					'<TABLE cellSpacing=0 cellPadding=6 width="100%" border=0>' +
    					'<TR><TD align=right><div class="closeBtn close">&nbsp;</div></TD></TR>' +
    						'<TR align=middle>' +
    						    	'<TD><B><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=4><I>' +
    									'Loading Pictures' +
    			            			'</I></FONT><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=2>' +
    									'Please wait.' +
    						 			'</B></FONT><BR><BR><img src="myupload.com/busy.gif"/></p></TD></TR></TABLE></TD></TR></TABLE></CENTER>';
    									
    
    	var imageUpload = {
    			disableFlashResize :true,
    			uploadUrl : 'myupload.com',
    			dataField : 'Photo',
    			thumbnailSizeId : '14',
    			defaultSizeId : '18',
    			removeText : 'Remove',
    			cancelText : 'Cancel',
    			retryText : 'Retry upload',
    			uploadingText : 'Image uploading',
    	        flash_button_width : 151,
    	        flash_button_height : 18,
    	        flash_button_text : '<span class="button">Select Images</span>',
    	        flash_button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;font-weight:bold;} .buttonSmall { font-size: 10pt; }',
    	        flash_button_text_top_padding : 1,
    	        flash_button_text_left_padding : 11,
    			errorTexts : errorTexts,
    			popupMsg : popupMsg
    
    	};
    My head is spinning.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Ummm...I don't even see an <img> tag in there. So I'm guessing that the image is actually appearing in your flash plugin, given that you are apparently using flash to do the uploading.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Right

    Because the links are not in the source code I'm thinking an easier route might be to figure out a way to right-click and get the URL's via javascript or PHP. Is that even possible?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Ummm...if the image is *displayed* via Flash, then you'd have to do that *IN* Flash.

    Can you show this in a live page?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Sure

    Here's a link to the working script:

    http://roofing-company.ca/test.php

    As you can see I can upload images fine and thumnails are shown. The only way I can get the image location is by right clicking and selecting (copy image location). I'm using firefox. What I'm trying to figure out is a way to echo out the image location automatically for any image uploaded.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Okay, I think this will work:
    Code:
    <input type="button" value="show img src"
     onclick="var d = document.getElementsByClassName('uploadedImage')[0];
              var i = d.getElementsByTagName('img')[0];
              alert( i.src );" />
    That should work in Firefox and Chrome and likely in MSIE9. For older MSIE, getElementsByClassName doesn't exist, so you have to do it more painfully. You could do it this same way for all, probably:
    Code:
    <input type="button" value="show img src"
     onclick="var ds = document.getElementsByTagName('div');
              for ( var d = 0; d < ds.length; ++d ) {
                  if ( ds[d].className == 'uploadedImage' ) {
                      var i = ds[d].getElementsByTagName('img')[0];
                      alert( i.src ); break;
                  }
              }" />
    Better to put the JS code in the <head> instead of inline like that, but should work inline.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    soma56 (12-15-2010)

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That's great. I really appreciate your two cents on my delima. Your script works, however, if a second photo is added then it doesn't work. I figured if I could some how echo the image locations out then I could use them. At this point I'm willing to try anything as you'll see with the following link: Perhaps you could put a spin on this:

    http://roofing-company.ca/test2.php

    After an image is uploaded a user can drag and drop the image to the text areas above and the url location appears automatically. This isn't practical but it's all I can figure out due to my limited knowledge of javascript.

    Ideally, I'd like it be when the image is uploaded that the textareas are automatically populated with the image locations - that would solve all my problems. Possible?
    Last edited by soma56; 12-15-2010 at 03:23 AM. Reason: grammar error

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    possible, yes, but it would probably be easier if the <img> tags already existed on the page and weren't created by the flash-based stuff.

    What you could do is have
    <img onload="copyUrlToText(this,1);">
    etc.

    You are really complicating things by having some of the code in JavaScript and some of it in the embedded Flash controller, but yes, I see why you are doing it this way.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Greenwood Village, CO
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have such problems in my dissertation writing service .
    try onload="copyUrlToText(this,1); in my point it work.

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    possible, yes, but it would probably be easier if the <img> tags already existed on the page and weren't created by the flash-based stuff.

    What you could do is have
    <img onload="copyUrlToText(this,1);">
    etc.

    You are really complicating things by having some of the code in JavaScript and some of it in the embedded Flash controller, but yes, I see why you are doing it this way.
    Thanks, I've been placing that code throughout the page with no success. Can you be more specific how I would make this work with my existing code?

    With respect to the img tag, if I had access to it and could avoid the flash then I would have done things completely different. I didn't anticipate this bump in the code. And considering that Javascript is less familiar to me then a foreign language I hear on Discovery channel once in a while I could use all the help I can get.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    So are these text fields, where you want the image URLs to appear, going to be already on the page, or do they need to be constructed dynamically, too? And do they need to be <input type="text"> or could they just be lines in a single <textarea> or even in a <div>???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So are these text fields, where you want the image URLs to appear, going to be already on the page, or do they need to be constructed dynamically, too? And do they need to be <input type="text"> or could they just be lines in a single <textarea> or even in a <div>???
    They don't have to be dynamic. However, they do have to be <input type="text"> because I'll be adding a form in which the values (image links) will be processed.

    From there I can use PHP to do my magic.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Okay, I just finally figured out the dirt simple way to do this!!!

    We will simply scan, every quarter of a second, for any uploaded images and fill in the text fields from all those that are found.

    I will assume, for now, that you have this <form> on the page:
    Code:
    <form name="Which">
        <input type="text" name="Where[]" />
        <input type="text" name="Where[]" />
        <input type="text" name="Where[]" />
        <input type="text" name="Where[]" />
        <input type="text" name="Where[]" />
        <input type="text" name="Where[]" />
        ... other fields ...
    </form>
    Notice how the name is a PHP array, so you can get them all in your PHP code when it is submitted.

    And then:
    Code:
    function addImageUrls( )
    {
        var wheres = document.Which["Where[]"]; // reference to all the Where[] fields
        var whereNum = 0;
    
        var divs = document.getElementsByTagName("div"); // FIXED FIXED FIXED!!
        for ( var d = 0; d < divs.length; ++d )
        {
            var div = divs[d];
            if ( div.className == "uploadedImage" )
            {
                var image = div.getElementsByTagName("img")[0];
                wheres[whereNum].value = image.src;
                ++whereNum;
            }
        }
    }
    And, finally, change your <body> tag to this:
    Code:
    <body onload="isReady=true; setInterval(addImageUrls,250);">
    So now, every 250ms that code will be invoked and it will update all the form fields with any image urls found.

    Please note: This is *UTTERLY UNTESTED*. Just off the top of my head. Cross your fingers.

    If this works, we *could* generate the <form> fields (the Where[] fields) dynamically. Not my choice, but could be done.
    Last edited by Old Pedant; 12-15-2010 at 08:40 PM. Reason: Had an error...see line with "FIXED"
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    soma56 (12-15-2010)

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    NOTE: If you aren't going to be using this in MSIE7 and below, we could use getElementsByClassName to simplify and speed it up a little. But if it works okay as is, leave it alone.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I'll give it a shot this evening. Please check your pm box and thank you.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •