• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Uploadcare - displaying image in webpage before/after upload

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
i have a website that is very nearly complete. my last and final obsticle is image uploading. and as you can imagine as a noobie i have been through the thik and thin looking for a way to impliment uploading...(6.15 AM lol)i tried the hard way to begin with using php and got nowhere, i eventually stumbled upon a widget embedment UPLOADCARE...

i am now using jscript to display the image.. however i have 1 issue...

instead of displaying the image, all im getting is the text/ascii displayed UUID/URL rather than it being displayed as the img ...
i know sumwhere its down to me using 2 jscript suggestions as i have sort of mixed the input part with another suggestion of onchange... so i basically really need sum1s help with a workaround...

i would be most greatfull if anybody can offer me a quikfix and i will indeed place you within the website credits... thank you.

here is the code...

<head>
<script>UPLOADCARE_PUBLIC_KEY = "c557ad102b8e86698602";</script>
<script src="https://ucarecdn.com/widget/2.8.2/uploadcare/uploadcare.full.min.js"; charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>;

<script type="text/javascript">

function imagepreview(input) {
if (input.files && input.files[0]) {
var filerd = new FileReader();
filerd.onload=function (e) {
$('#imgpreview').attr('src', e.target.result);
};
filerd.readAsDataURL(input.files[0]);
}
}
</script>
</head>

</body>

<div style="position:absolute; top:440; left:440;">
<input type="file" name="my_file" onchange="imagepreview(this);" role="uploadcare-uploader" /><br/>
<img id="imgpreview" alt="ImagePreview" />
</div>

</body>


for the record. i can get it to work if i just use the input from my hardrive but when i ty to use the widget. it does not load...i did have it displaying just the ascii URL, but i changed it since to get it displaying from hardrive...

bjut i really need to get it working from the widget....

thanks in advance...really appreciate it...

tried my best and am still at it. and will be until i get a fix lol, but its been a long journey getting this far......

o.k after a little more playing around i have got this far....

<a>

<div style="position:absolute; top:755px; left:650px;">
<input type="hidden" name="my_file" role="uploadcare-uploader" onchange="imagepreview(this);" /><br/>
<img id="imgpreview" alt="ImagePreview" style="position:absolute; top;10px; left:-168px; height:212px; width:134px; z-index:999;" />
</div>

but still wont preview the image.....not sure where to go from here as i have expired all options that i am capeable of at present...could really do with a little advice....thanks
 
Marshal
Posts: 70215
281
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Welcome to the Ranch
I tried adding code tags to your post because they usually improve it no end, but you hadn't indented it, so the code tags would hardly have worked.
That doesn&apos't look like Java®, more like JavaScript, so I shall move you to the forum where we usually discuss it. Is your problem finding the image? Please show us where you gave the URL for the image, and tell us what it is (if possible). We can only help if we know the full details.
 
If we don't do the shopping, we won't have anything for dinner. And I've invited this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic