showing image loaded from file before upload/POST

I have the following html code to upload an image:and I want to show the image that the user uploads before it’s actually processed in the backend. How do I do this?Basically what I want to do is to upload an image from an image in your computer and show it so it can be cropped using …

via PHP Website Development » Search Results » ajax:

showing image loaded from file before upload/POST

I have the following html code to upload an image:

and I want to show the image that the user uploads before it’s actually processed in the backend. How do I do this?
Basically what I want to do is to upload an image from an image in your computer and show it so it can be cropped using jCrop and then process the image in the backend
……………………..

Save the file on post back like normal
During postback
Add link to image on page
Add javascript to ‘onload’ that calls another page to handle processing of image

……………………..

What you need is HTML5 File API. Take a look at readAsDataURL.
Basically, you’ll need to catch the onchange event on your input[type=”file”] and load the associated file with FileReader, then save the image content in an . More clear informations here.
……………………..

One way to do this is to upload the file asynchronously via Flash. There are components out there, (both commercial and open source), that allow you to do this. I have used the .NET version of the following component with good success:
http://phpfileuploader.com/
http://phpfileuploader.com/demo/index.php
One of the benefits of using Flash is that you can restrict the file size on the client before anything is posted to the server. Check out some of the demos.
……………………..

I don’t think you are going to get around not doing some processing on the server since you are not going to be able to see the file you are uploading until you submit. You can try to do something via Ajax though. I came across the jQuery Form Plugin and the File Uploads example.
Copy and pasted from the site:
Since it is not possible to upload files using the browser’s XMLHttpRequest object, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form’s submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn’t work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.
To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea.

For more info: showing image loaded from file before upload/POST

PHP Website Development » Search Results » ajax

showing image loaded from file before upload/POST

Share this post:

Related Posts

Leave a Comment