Geek Answers Handbook

JQuery - how to sketch from img input file

I want to create an image upload system in html. When the user selects an image in the input file, a thumbnail image is displayed. As I read, there is no way to get the image path from the input file due to security issues. Can someone tell me how can I do this using javascript (using jQuery)? Thanks!

+4
source share
3 answers

You cannot access the contents of the file before the file is uploaded to your server unless you use Chrome, which has some fancy features in this area.

What you can do is upload the file and then extract the file generated as a thumbnail with PHP, I don’t think the answer you are looking for. Therefore, to give you a fair answer: no, you cannot do this.

+2
source

I might get a trick:

to try:

<!DOCTYPE html> <html> <head> <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(100) .height(100); }; reader.readAsDataURL(input.files[0]); } } </script> <meta charset=utf-8 /> <title>JS Bin</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <input type='file' onchange="readURL(this);" /> <img id="blah" src="#" alt="your image" /> </body> </html>
+7
source

I would recommend using the jQuery FileFive : https://github.com/JDBurnZ/jquery-filefive

Internet Explorer 10, Firefox and Chrome support HTML5 file objects, which allows you to read the file size, file name and mime type, as well as the actual contents of the file; the later of which is useful if you want to display thumbnails of selected images without loading them.

Working jsFiddle example: http://jsfiddle.net/URqBk/

Code example:

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://raw.github.com/JDBurnZ/jquery-filefive/master/jquery.filefive-0.1.0-rc1.min.js"></script> <script type="text/javascript"> $(function() { $(document.body).on('change', 'input[type="file"]', function(event) { var $ = $.filefive(this); $.each($filefive.files(), function(offset, file) { var $img = file.image(); $('body').append($img); } }); }); </script> </head> <body> <form> <input type="file" name="myfile" /> </form> </body> </html>
+2
source

More articles:


All Articles