I am trying to design a module in which I would like to show a preview of the image to the user before he uploads the image to database.
I have found a solution which works for Firefox but is not working for IE and Chrome...Can someone help me out.
Here is my code:-
function imageURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#replaceMe').attr('src', e.target.result)
.width(100)
.height(100);
}
reader.readAsDataURL(input.files[0]);
}
}
And I am calling this function on change event of the file input control:-
<input type="file" class="file" onchange="imageURL(this)" />
And also I have tried this url steps but it doesnt work for IE7 and 8 and Chrome.
The most efficient way would be to use URL. createObjectURL() on the File from your <input>. Pass this URL to img. src to tell the browser to load the provided image.
Click the drop-down box next to “Tab Hover Card Images” feature and select Enabled from the available options. Right after you select “Enabled” in the drop-down box], a Relaunch button will appear at the bottom of the Chrome window. Click on it to restart Chrome and enable Tab Preview Images in Chrome. That's it.
Right-click on an image file and you should now see an Image Preview command in the popup menu. Click that command to view the image in Windows Photo Viewer (Figure D). Photo Viewer instantly pops up. Click the magnifying glass icon and move the slider to zoom in or out of the image.
First, we have a division element that contains the “img” tag. Using Jquery, we will change the “src” attribute of the “img” tag on upload to preview the image. The second element is the “input” tag. It is essential to specify type = “file” in this context.
To preview an image before and after upload with JavaScript, we can read the image file into a URL that we set as the value of the img element’s src attribute with a FileReader instance. to add a form with an input and an img element. We call document.querySelector to select the input and img elements. Next, we create a new FileReader instance.
alert ("Please upload a valid image file."); Internet Explorer 8 and 9 are built in with a security feature which prevents working of the live image preview when the application is hosted on server. Due to the built in security feature, these browsers modify the image path from C:\Images\Mudassar.png to C:\FakePath\Mudassar.png.
You have to upload the file to the server and can show the preview of the file after it is successfully uploaded. Not true. The new HTML5 File API serves exactly this purpose.
The HTML Markup consists of an HTML FileUpload control and a DIV which will be used for displaying live preview. Firstly we need to check whether the file is a valid image file. Then we need to determine the browser and its version as based on that we need to select the appropriate way to display the image preview before upload.
There is no cross platform way to accomplish this using only HTML/JavaScript. It is possible, however, using a very basic programmatic approach:
Step 1: Binding to Blur
Bind a "blur" event to your file input field, like so:
$("#input_field").blur(function(event){
alert("Blur!");
});
Step 2: Server-Side Thumbnailing
You're going to have to write a small application/route on your server side application that simply accepts a form that contains in input file, and generates a temporary output file. You could even just temporarily store the filedata in your database, rather than write individual files to disk; the implementation is up to you. When this route receives a request, it should thumbnail the image, and then return a path to that thumbnail
Step 3: AJAX
First, choose one of the many available jQuery "AJAX Upload" libraries to make the form that contains your file upload it via AJAX. Apply that library to the form(For the examples below, I'll use ajaxForm.), and then modify your blur:
// AJAX the form
$("#your_form").ajaxForm({
success: function(response){
// Insert your returned thumbnail into your DOM.
}
});
// Modify the blur
$("#input_field").blur(function(event){
$("#input_field").closest("form").submit();
});
Issues:
There will be issues with the approach above. Making your form AJAX will mean submitting it regularly will break - not to mention that the thumbnail route will be different than the actual form submission route. Use some workarounds (for example, have a secondary hidden form, and the blur event copies the file-upload onto it, and then submits it).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With