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
Related
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
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?
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.
I'm using Codeigniter's upload library to upload images for user avatars. I'm also using Jcrop which allows users to select an area to crop.
(source: webresourcesource.com)
I'm saving all the coordinates of the selected area in text inputs which I'll use in php to crop.
Is it possible to display the image selected before uploading?
Upload form:
<?php echo form_open_multipart('upload/do_upload');?>
<input type="file" name="userfile" size="20" />
<input type="submit" value="upload" />
</form>
If possible I'm trying to avoid heavy js for this or uploading 2 times. When choosing a file I notice that it shows the name of it:
Is there a way to use that functionality to retrieve the image path as well (path to the image in the uploader's computer)? In theory I'll be able to use that in image tags and display the image without js.
To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.
Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.
The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.
When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.
Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:
input.addEventListener('change', function () {
preview.src = URL.createObjectURL(this.files[0]);
});
preview.addEventListener('load', function () {
URL.revokeObjectURL(this.src);
alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
});
Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.
You could potentially do it using css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), but it's going to be incredibly hard to integrate with jcrop...
I would recommend just making the user wait until it has been uploaded. That's what facebook and most other websites that allow cropping do.
In any case it wouldn't speed up the upload process so there isn't that much a reason to do it.
You can't get the full filepath. It would be a security issue: http://forums.asp.net/t/1077850.aspx/1
Well, you can use other cropper library wich comes with a preview like the one defusion has.
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
i have a form that with a link click adds a new for a file with jquery's .html()
// show div to change image on product_edit.php
$("#change_img").click(
function () {
$("#change_img_div").html('<label>Image product</label><input type="file" value="" name="item_img" id="item_img"/>').fadeIn('fast');
$(this).fadeOut('fast');
}
)
When I choose a file and I submit this name "item_img" is not present in the php $_POST array,
if I put type="text" instead the new input is passed to POST.
Basically seems like a "file" type is not recognized if this is not present in the html if the first place?
Files are sent as binary data and as per the HTML specification, it requires the <form> to be set with enctype="multipart/form-data" so that it can be mixed with text content (the normal request parameters). In the PHP side, they are available by the $_FILES array.
See also:
W3schools - PHP File Upload example
Tizag.com - PHP File Upload tutorial
A lot more PHP File Upload tutorials