How should i create a preview of image to be uploaded before it is actually submitted using AJAX in PHP?
Without uploading the image, this is going to be impossible in JavaScript as far as I can see, because security limitations are going to prevent you from determining the selected file in the file upload, and embedding that file in an img tag (as it used to be possible five years ago.)
You will be more lucky with Flash-based uploaders. I have seen some that offer the kind of functionality you want.
Update: Here's one that offers a preview function. From what I can see, it base64 encodes the local image and serves it to the surrounding HTML page as a inline data <img> tag. This is great because it might integrate well into your site. It does not work with any version of Internet Explorer, though.
Here's a fully Flash based solution that does previews in all browsers.
you first have to upload the document to server. Than you can show like.
<img src="uploads/file1_12224.jpg" />
The "file" input type doesn't expose the local file location of the file to be uploaded. It does "appear" to because as a user you can see the location, but the web page never knows this value. Without the local file address, you can't show a preview of the image on the web page using plain HTML or JavaScript.
Related
I was looking at an possibly fraudulent eBay auction. However I am confused by an image within it, since it does not appear to be an image.
youneedtobuy.intothis.org/win.php
The complete HTML content of the url above is:
<body>
<img src="http://youneedtobuy.intothis.org/win.php" >
</body>
Here is a screen copy of the image, with the email address blurred out by me. There is no JS scripting, no CSS to speak of, just one line of code.
So, essentially the scammer can insert an 'image' into their eBay ad, and that image won't be scanned by normal tools.
How is this image created? And how could the friendly folks at ebay include a scanner in their system that has the ability to "see" this image (and preclude the scam from re-occurring?)
The image is likely created using PHP's file_get_contents() function. For example, the following PHP script will display the contents of myimage.jpg to the browser, but the file could be called show-image.php:
<?php
header("Content-Type: image/jpeg");
header("Content-Length: ".(string)(filesize('myimage.jpg')));
echo file_get_contents('myimage.jpg');
?>
As you can see, this is achieved by telling PHP to serve up the image/jpeg MIME type.
Any image can be returned by a script instead of a real file.
An alternative answer shows methods of doing this, but by using a script one can serve different images to different users, log IP address and other information thus tracking viewers etc.
It is also a common technique used to return thumbnail or summary images. e.g. using PHP and ImageMagick to generate an image of the first page of a PDF file.
Incidentally the image will be scanned by normal tools - they simply look for the image tags, not what extension the file has. What you are really saying is that the text contained within the image won't be processed or analysed, and the image does invite you to directly connect to someone, which is against eBays terms and conditions.
i created PHP form for my site, with image upload option on it.
but it only show the image name before image submitted, but i want to view/preview the image/file before submit so how this possible in this?
"file36":{"label":"Select/Upload a Student's Photo","accept":"jpg|jpeg|png|gif|bmt","files":true,"attach":true,"database":true,"maxbytes":204800,"fieldtype":"fileupload","required":true,}},
As far as I know this is not possible with php until you upload the image.
However, you are able to do so with jquery.
Check out http://blueimp.github.io/jQuery-File-Upload/
The old way is to upload the image to a temp folder, create an iframe and load the response there. Then link the temp image from the iframe to a hidden field in the final form with JavaScript. When you submit the form place the image in the right folder. Finally run a cron job every 24-48h to empty out the temp folder.
The new way is the File API supported in IE10+ and all modern browsers. Fallbacks in Flash and Silverlight exist for older browsers.
You obviously misunderstand how file uploads w/ PHP work.
PHP is server side programming language, meaning, it can only execute and access scripts, that are on the server. So, for PHP to access / analyze a picture in any way, it has to be on the server already.
You can upload the file in a temporary directory, analyze it and, if it suits your needs, move to a permanent folder. Otherwise, just delete it.
I am looking for some help in downloading pics from a website. Here is the problem detail.
URL is basvandenbroek dot com,
suppose when we visit the following page http://www.basvandenbroek.com/nl/product/27341/704/snaarinstrumenten/boston/snarenset_elektrisch.html
we have a thumbnail pic here which when click bring its larger version. I would like to capture the larger image using a php script and download it onto my pc.
Problem is when we inspect the HTML we see the following code for images
../../../../../../../jpg/27000/27341.jpg
../../../../../../../jpg/cache/27000/220_220_27341.jpg
Based on the above code i assume that if i append website address at the start of the
jpg/27000/27341.jpg I could access the pic but its not working it that.
I believe URL is hidden or I might not understanding things properly. I am new to PHP and Scripting and I would like somebody to help me through it situation.
Thank you
For the website you mentioned, if the thumbnail is
http://www.basvandenbroek.com/jpg/cache/27000/220_220_27341.jpg
then the
http://www.basvandenbroek.com/jpg/27000/27341.jpg
So the thumbnail is basically the dimensions (220 x 220) added as a prefix to the original in a different folder. Also, there is nothing like hidden URL. Any link that is valid on a web-page is sure to appear in the source of the html. In chrome and firefox, atleat, you can find this link by right-clicking the link and copying the link address.
In your case you can find the thumbnail's url by right-clicking the thumbnail and the original's url by right-clicking it.
However, if you want to do this automatically using PHP, you will have to write code that can parse the html for the page to determine the urls.
In your example, here would be the larger image:
http://www.basvandenbroek.com/jpg/27000/27341.jpg
The smaller image is at:
http://www.basvandenbroek.com/jpg/cache/27000/220_220_27341.jpg
This means you would need to scrape out the first two underscored parts of the name (220_220) using string manipulation. You would also want to string replace "cache/" with an empty string.
relative urls are relative to the url of the containing document. so if the document you're scraping is located at http://example.com/foo/bar/baz/doc.html, and the image is referenced as
../../omg/wtf/lol/cat.jpeg, its full url is http://example.com/foo/bar/baz/../../omg/wtf/lol/cat.jpeg, or http://example.com/foo/omg/wtf/lol/cat.jpeg.
btw, this has nothing to do with PHP or scripting in general, and is instead firmly a HTTP thing. and there are no "hidden" URLs in HTTP, that would be a contradiction.
edit: your comment makes it look like the problem is with the Referer header or session id sent (or not) in your request.
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.
I am playing with my little PHP project right now and I am struck with a question about how I should approach the image handling. As far as I know, it's either you host the image in your server or let the user provide the link. Given my application is on a shared hosting site, which one better? What are the risks?
User provided
You need to make sure the link is valid
You need to check the content of the link to confirm its an image
You need to be able to check the image on every load
You have to build your html to check the image is still available.
you would also have to confirm that the location of the image is a trusted location
if the image is not on a HTTPS Server and you are, then you can cause issues with browsers.
Self Hosted Image
You can make sure that the image is of the correct format.
You need to watch out for exploits such as GIF Exploit
You can manipulate the image with PHP Dynamically
You can check and validate sizes of images and store on file-system or DB
Requires more bandwidth
If images are dynamic then they can cause high CPU
I would suggest that you go for self hosted image, OR host images on another data centre such as an image host with an open API.
If you your worried about bandwidth then you can create an image upload system that upon upload it uses an image host API to send the image to an external source and then store the image id in the database along with post/user/entity.
Stack Overflow uses the ImgUr for there images,SO has already thought about what your thinking of and have chosen to store externally but upload locally, ImgUR returns data that can be stored, Example below:
<images>
<image>
<name>imgur</name>
<title/>
<caption/>
<hash>UrTHG</hash>
<deletehash>bzEkpCdHPL22Hlp</deletehash>
<datetime>2010-08-14 03:39:23</datetime>
<type>image/gif</type>
<animated>false</animated>
<width>314</width>
<height>115</height>
<size>4413</size>
<views>0</views>
<bandwidth>0</bandwidth>
</image>
<links>
<original>http://imgur.com/UrTHG.gif</original>
<imgur_page>http://imgur.com/UrTHG</imgur_page>
<delete_page>http://imgur.com/delete/bzEkpCdHPL22Hlp</delete_page>
<small_square>http://imgur.com/UrTHGs.jpg</small_square>
<large_thumbnail>http://imgur.com/UrTHGl.jpg</large_thumbnail>
</links>
</images>
This is great because, thumbnails such as small_square,large_thumbnail etc are pre-generated along with meta data such as size,width,height, views etc.
If your worried about CPU usage and server-load then you should revert to the section above regarding external data storage.
If your worried about CPU then you can manipulate the image via GD Libraries and then store a cached version on file-system, update over intervals if need me.
Another down pointer to having user linked images is that when the image is it can be a dynamic image and loggin user data such as what pages that suer is visiting, this one if the main reasons that when your on Facebook and you embed an entity such as a blog post, the images are downloaded and stored on Facebook's CDN, so that outside sources cant tell what and where an IP is.
This should help you decide.
As there has been some discussion about the risk of XSS, i thought i would clear something up a little.
If you choose to allow the user to give you a link to an image you would have to validate the image and not so much the content, the reason why this has to be done is because lets say the user entered the following image location.
javascript:alert('XSS');
If you do not sanitize via PHP with functions like htmlentities() and HTML Purifier library, after you store the above string in your database, when a user attempts to visit the page it would render like so:
<IMG SRC=" javascript:alert('XSS');">
So that every time the page renders you get a dialog box stating XSS, thi is called an XSS Atack, the atack then cauld add another image "url" / "code" that sends certain data such as SESSION ID's to another site that automatically goes to your site and collects data under that ID.
if an attacker entered the following url http://attacker.com/evil.js then the rendered content would be like so:
<IMG SRC="http://attacker.com/evil.js">
As this is an image tag then evil.js would not be processed as javascript, because thats not how the Document Object Model is built, this would be safe to users.
Links on Vulnerabilities
CSRF
XSS Examples
XSS Wiki
Windows Metafile Vuln
Cross Zone Scripting
One thing to be aware of if you are accepting URLs from your users and using them to build an <img> tag: you have to be careful to not be vulnerable to Cross Site Scripting (XSS) attacks, which is an attack where a malicious user is able to inject their own code into your website.
For instance, let's say your code looks like:
$img_url_from_user = $_POST['image_url']; // user inputs a URL in a form
echo '<img src="' . $img_url_from_user . '" />';
A malicious user comes to your form and fills it out:
Now when PHP gets that input and uses it for $img_url_from_user above, the resulting HTML the browser gets is
<img src="invalid.jpg" onerror="alert('attack!')" />
and when the page is loaded, you will see an alert (obviously an attacker can do much worse that this. For instance, they could collect cookies and then use an AJAX call to send the info to their own server). So you have to make sure you sanitize any input you get from your users!
Resources
What are the best practices for avoid xss attacks in a PHP site
Exotic XSS: The HTML Image Tag
I highly recommend pushing your image requests to imgur.com because it appears to be a very reliable image host that cropped up a while back to help support Reddit.com in their need for image hosting. Imgur will allow you to link to images they host and they are completely free. They aren't like tinypic or other sites that will block your images later on.
The only drawback I can see is if someone has a problem with you using a site that also hosts a lot of free porn. Totally your call if you want to go there. It's an open door and anyone can upload anything... but it's stable and reliable so I use it for all my image hosting needs.
One risk of having the app link-dependent is if the link dies, the image dies. One risk of keeping things on your server is, it's possible to disguise any content as an image file.
Another problem with using an external image URL is that (unless hotlinking is disabled on the server the url points to) you might be contributing to someone else's bandwidth problems because most users won't bother uploading the image to a free image hosting site by themselves if the image already exists somewhere in the internet.
Any time you display user-created content on a page, you need to treat it as though it's radioactive. This is a potential XSS vulnerability. Take a look at this cheat-sheet for examples. Some sample inputs that could compromise your users:
document.write('Gotcha!')
http://myserver.com/coolimage.png" onload="document.write('Gotcha!')
><a href=malicioussite.com>View user profile</a>