...

View Full Version : How do I get the images links after they've been uploaded?



soma56
12-14-2010, 10:26 PM
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:


<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.

Old Pedant
12-14-2010, 10:59 PM
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.

soma56
12-14-2010, 11:21 PM
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?

Old Pedant
12-15-2010, 12:19 AM
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?

soma56
12-15-2010, 12:43 AM
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.

Old Pedant
12-15-2010, 01:13 AM
Okay, I think this will work:


<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:


<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.

soma56
12-15-2010, 03:20 AM
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?

Old Pedant
12-15-2010, 07:38 AM
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.

JohnGoff
12-15-2010, 11:35 AM
I have such problems in my dissertation writing service (http://dissertations.superiorpapers.com/) .
try onload="copyUrlToText(this,1); in my point it work.

soma56
12-15-2010, 03:55 PM
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.

Old Pedant
12-15-2010, 07:40 PM
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>???

soma56
12-15-2010, 07:56 PM
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.

Old Pedant
12-15-2010, 08:17 PM
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:


<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:


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:


<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.

Old Pedant
12-15-2010, 08:19 PM
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.

soma56
12-15-2010, 08:38 PM
I'll give it a shot this evening. Please check your pm box and thank you.

soma56
12-16-2010, 12:38 AM
f#$@ing beautiful. If you're ever in Toronto just let me know. I'll buy you a beer.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum