How do I turn the div with id "uploadWrapper" from this jsFiddle into a button that can upload images - basically doing the same as <input type="file">. Thanks in advance.
EDIT - DUE TO ANSWERS RECEIVED
How can I show a preview of the image in the place of the div with the blue background when someone uploads an image, see this jsFiddle
Check this fiddle: http://jsfiddle.net/techfoobar/kM9aa/1/
Preview: Like Justin Satyr said, there's no way using plan HTML/JS to preview the chosen image unless you upload it to your server and use the uploaded image's URL.
This is not as easy to do as one would imagine, and some browsers prevent triggering file uploads from untrusted elements automatically for security purposes.
I recommend using a third party file upload plugin, such as Plupload, or faking a custom button using progressive enhancement (invisible file upload button, with a custom graphic under it (of course not the most flexible of solutions) as described here:
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
Plupload events allows you to hook into the events that might occur during ajax file upload, and do stuff with the upload info. See this page on examples of what response data you might get:
http://www.plupload.com/example_events.php
You can get response data like this:
id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png
And of course you can modify what the server returns on a successful upload, to be able to get the full absolute URL to the uploaded image.
After you have this data, you can hook into it and switch the image doing something like this (with jQuery):
// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
$('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}
You can't unless you use Flash, Silverlight, or an Active-X object. Browsers lock down all file browsing operations.
You can appear to do this by making the <input type="file" /> invisible but over a button so that when the user clicks the "button", they are actually clicking the input.
UPDATE:
In response to your second question, to preview the image, you would need to post it to your server and then point your img's src to an image path on your server.
Related
I'm trying to implement a UI that would let the end user upload multiple file sot a server, on a custom UI - pretty much the same way GMail or Outlook.net is doing it.
Few things to node:
The <input type="file"> is ugly - and not standard (IE shows a button named 'Browse' to the left of the file name. Chrome shows a button named 'Choose' to the right of the file name).
Most suggestions how to do the UI suggests hiding a input file element with opacity=0, but on top of by custom UI. The 'click' event will open the dialog box, and upon return the file name (without the path) will be available as a $('#file').val(). See this question, as well as the sample on jsfiddle.
I'm also aware HTML5 has a multiple="multiple" attribute now, which will let the user select multiple files.
However, I'm looking for a multiple file solution, which will work on IE8 and above (as well as WebKit, Mozila).
Some people suggested Google is using Flash. This is not true. Their multi file upload is working when flash is disabled.
Now, here is my biggest surprise: Using the developer tools (F12) on both IE and Chrome, looking at both GMail and Outlook.NET - both implementations do not have a <input type='file'> element in the tree (as far as I can tell). Moreover, both implementations are working with IE8 (flash disabled).
What is going on? How do they do it?
EDIT: Why do I think they don't use file input element? Open the developer tools (F12), switch to Console, type: document.getElementsByTagName('input'). There are 24 input elements, 19 of which are type=hidden, none is type=file.
EDIT 2:Thank you all responders and commentators. Indeed - the "there is no other way" argument (in comment) below was valid. As it turns out, both Outlook.NET and GMail will have a <input type='file'> element, which they will add dynamically, only when the user clicks the 'Attach a file' button. Then, they will send a 'click' event to the element, which will trigger the select file dialog.
The witness this, use the F12 development tool (either in Chrome, or in IE), and in the interactive console type: document.querySelectorAll('input[type=file]'). Note that in both implementations, the element is a direct child of body (with display=none).
They do not use iframe for the upload (unlike the only answer below), but simple XHR code to upload, which is now, in HTML5 is available.
The best resource on the Web for how to do it is: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications. I've went through the steps of #Jay below (which are great), but the Mozilla page is simpler, which is my recommendation. Also, take a quick look at the jsfiddle sample on #Niranjan comment.
I recently implemented a multi file upload UI for an old asp.net website, but the concepts should be the same.
I'm not very good at writing (summarizing code) but here goes.
Create a number of IFrames. I had problems trying to write IFrames after the document loaded due to security restrictions, so had the server render as many as I though the user would use at once.
Add an 'upload' button and handler which first adds a load handler to one of the iframes.
var frame = $('iframe:first');
in the frame load handler ---
frame.load(function () { /* all the code below* /});
2.a. Write the input tag for file and what ever other elements you like into the frame like this
frame.contents().find('body').html("html goes here");
2.b. Now add a handler to the file input in your frame and submit that form:
frame.contents().find('#fileUpload').change( /*submit the form */)
2.c. Now invoke the file upload dialog
frame.contents().find('#fileUpload').click();
2.d. Now that line will block until the dialog returns. When it does you have to check the value of the file upload control for null in case they canceled. This is where i marked the iframe as not in use.
2.e. Ether way you'll need to unbind from the load of the iframe and rebind to a different method that will handle the return (upload complete)
frame.unbind('load');
frame.load(function () { /* handle file uploaded */})
2.e.1. This is where I reported success to the user and released the frame so it could be reused.
2.e.2. Finally unbind from load again from the upload complete method
All of that is in your frame load handler
3.Now cause the frame to load
frame.load();
At least thats how I did it. I uploaded all the files to a handler which reported file % and a loop inside the parent page fired off ajax getting and displaying the progress of each file.
The main idea is if you want multi file upload in an 'ajaxy' style but not using flash or Html 5 you'll need to use a collection of iframes and some fancy script.
Hope this helps.
I need a way to check if an image has been uploaded. I want to do this by checking if a certain URL is existing.
I am getting clients to upload files to my site for their account and I want a tick to appear next to the upload box to show that the file exists.
The uploaded file URLs will be something along the lines of: http://www.example.com/Practitioner-Area/($user.firstname$)+NI
The tick file will be:
http://www.example.com/Practitioner-Area/images/complete.jpg
I think I will need a jquery but I have never used them before. So I would prefer a standard html code tbh, but will use jquery if needed.
Any help would be much appreciated.
Matt
Try the onerror event:
<img src="image.gif" onerror="alert('The image could not be loaded.')">
Then try to load that outside of screen or something.
Edit: This will create errors on the page so the AJAX result answer is the better one.
Is there a "good" way to generate a thumbnail for a JPEG file that doesn't have on in the EXIF information?
If a user uploads an image, I'm trying to display the thumbnail, but if there's no thumbnail in the image the display is blank (src=""). Currently we replace blank images with a loading image that gets swapped out with the thumbnail generated on the server by an AJAX call back.
Is there anything I can do client-side (jQuery & jQuery UI are already integrated, but open to new libraries if they'll help) other than displaying a loading image that gets changed by the AJAX call back?
For clarification I don't just mean taking the Base64 raw data and changing the height and width attributes most of our users upload 5MB+ files, and the text alone crashes the browser if we use the raw data. I mean actually appending a thumbnail to the EXIF, or creating it and using the created base64 data as the image source.
Apologies in advance for breaches in etiquette or lack of clarity, this is my first question on Stack Overflow.
I wonder if there's any way to read the images in the web page
cause I want to make a small plugin that can upload them to my server,
First,I set the images draggable and then I drap them to a small "box" and upload them,
Maybe the File API in HTML5,But I found it can only read local file unfortunately,
Anyone get some ideas?Thanks
If you want to deal with images (croping, resizeing etc) you have to use HTML5 <canvas> element. But if you just want to have an image element, you can use this:
var myImg = new Image();
myImg.src = "url_to_image";
If I understand you correctly, you want to copy images from some page to your server? You can get page source, all images links and display it in javascript, but to upload it to your server you have to use one of server side languages like e.g. PHP.
I've been searching for a plugin of TinyMCE that allows to upload and insert an image in the text, the problem I've found with many plugins is allowing to see and select from a gallery of images of the server, that's a functionality I don't need or want, just allow the user to select an image from his computer, upload and insert it.
There is a plugin that acomplishes only this?
Thanks
jbimages is what you might looking for.
Easy to integrate and to configure.
Just pups up the file uploader and places the image wherever you have your cursor in a post.
Just do not forget to set after installations the config files to 600 or 400.
You can find how-to
http://pastebin.com/
TinyMCE does this as standard:
try http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/external_image_list_url