Upload image,and some text with Ajax and PHP - php

I'm trying to upload image and 2 values from text fields, but I can't use a input type="file" for resource becouse I first choose file using camera capture and preview image in <img ..., after that I replace the src of image tag with resized image (max 500kb) and that image I try to upload. If I use a input type="file" , than I upload a first Image, not a resized. Any sugestions ?

You could capture the cam image and transfer it (base64 encoded) independent from the form to your server. Or put the base64 encoded image into a hidden input.

Related

Store img src in php variable

Is there any way to take an image from src of img tag and store it in a PHP variable.
<img src="image.jpg" id="crop"/>
somehow extract src and store in $image of php
Assume I am not aware of src value before hand.
Thanks please help.
Your problem is not very clear ....
If after cropping your image you want to get src and store it in DB or whatever
you can simply got this with jQuery
for example
<img src='abc.png' class='myimg'>
<input type='hidden' class='myimg_name_holder'>
then with jQuery
$(".myimg_name_holder").val($(".myimg").attr('src'));
Now you have your image name in a hidden input field now you can do whatever you want whether save in db or whatever....

convert base64 coded images to file input element

I am using a scanner API to scan images in my web application, its running well. But its create an image to view with src coded likes this:
<img src="data:image/jpeg;base64,/9j/4AAQS....">
I want to upload this image using my simple code witch post (input file) to PHP file in ajax by element id
<input type="file" >
So how can I convert this img element to (input file) element, or how can I post and upload this coded src
Thanx

PHP image upload and crop with url

I am using the below upload class for image upload and manipulating.
class.upload.php samples, a files uploading and images manipulation PHP class
Now I want to change form input type="file" to a text field where I will give a Image URL.
How can I make this uploading class to work.
Thanks In Advance.
this class seems to accept url's as arguments as well so just change the input type to text, name to for example image_url and use this line to manipulate the image as you wish after submitting the form:
$handle = new upload($_POST['image_url']);
Get the file name through text box and in background use php curl function to upload the file in the server and your uploading class will work fine
PHP Curl to upload file

How to show a preview of the uploaded image before uploading it

I have created an html form that contact text input fields as well as file input for image uploads. I have already created the submit.php that handles the image file uploaded as well as other text inputs that are typed in by the users and this php file works fine. However, I have also added an option for the user to preview form in the html form page so if they want to preview the form first before submitting it, they are taken to the form_preview.php page that shows them the preview of the completed form along with the forms beneath this preview so they can edit it further if they want. In this preview page, I am having a problem in showing a preview of the uploaded image before uploading it.
Here is my code and on info on what I've tried so far: In the form_preview.php page, I have the following:
<h1>Form Preview:</h1>
<p>Intro: <?php echo $_POST["intro"]; ?> </p>
<p>My Story: <?php echo $_POST["story"]; ?> </p>
<img src="<?php echo $_FILES["file"]["tmp_name"]; ?>" />
The above shows a broken image instead of showing an image. I thought the uploaded image will be stored in a temporary folder and if I added the $_FILES["file"]["tmp_name"]; as the image source it may show that image. Since its not showing, does it mean that this will not work? So is my only other option for this is to process the upload and store in the 'upload' folder first (similar to what I do in the submit.php file) and then add the link to the actual image that was added to this upload folder?

base64 image not decoding php

I have an image in HTML5 canvas which is taken from webcam's live stream. When I get a frame as snapshot and save it in canvas I do this
var myImage = canvas.toDataURL("image/png");
dom.write('<form method="post" action="upload.php"><input type="myImage" value="'+myImage+'" /><input type="submit" value="Submit" /></form>')
and in upload.php I do this
header("Content-type: image/png");
$img= $_GET["myImage"];
echo '<img src="data:image/gif;base64,'.$img.'" />';
doing this I get a popup window when page is loaded and when the form is submitted, it give me
data:image/png;base64,"VERY HUGE STRING"
I want to get it as an image. Please Help
Your call to header suggests you want to output the actual PNG image as the response to the request. However, you then write out an HTML tag, which is not valid in a PNG file.
If you want to write out the PNG image itself, presuming $img contains a valid PNG-format image, you can decode the base64 with the base64_decode function:
echo base64_decode($img);
If you want to show the image on an HTML page, change your header call to read Content-Type: text/html.
canvas.toDataURL() already includes the data:image/***;base64, part, so remove it from your output.

Categories