I have the following code
<div id=form>
<div id=viewimage>
<img src="placeholder.png">
</div>
<div id=upload>
<form action="upload.php" method=POST enctype="multipart/form-data">
<input type=file name=image>
<input type=submit value=Upload>
</form>
</div>
</div>
I need the image to be uploaded and then the #viewimage div to be refreshed with the submitted picture. When the form submits, the upload.php will return a file name of the uploaded file. I think this is an ajax question, but im a complete noob when it comes to ajax/javascript, so i dont have the slightest idea how to proceed.
If you want do do it in ajax, you should put your form inside an iframe, so when you upload the image, only a small part of the page (the form) is sent to your server.
After that, you can use upload.php response to get the name and path of uploaded image, and then you can just change the src of the img tag.
Related
I am using dropzone.js to implement file upload. I am using it to make a web compiler. Using php/ajax I want to show the contents of the file in the editor text area without saving the file in the server.
My current code snippets are-
<form role="form">
<textarea id="editor">
<?php if( isset( $data['source'] ) )
echo $data['source']; ?></textarea>
</form>
` <form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
<i class="fa fa-cloud-upload element"></i>
<div style="color:gray;">Drag and drop or click to upload file</div>
<input type="hidden" name="filenameEmail" class="filenameEmail" value="">
<input type="hidden" name="side" value="front">
</form>`
with the bit of code provided it's a bit hard to get to a proper solution fitting your needs.
generally (and as you asked for only an idea of how you could do it) however, I'd go with using the success event from dropzone.js which provides the server response as the second parameter according to there Documentation.
So what you do is reading out the data from the uploaded file using your upload.php and returning it so you can use it in the told event.
Easiest way (as always) is using jQuery with it to have full control of the response and assign the provided text/code/whatever to the
$('#editor').val();
I have an image upload form, which auto uploads the image when user selects the file.
Upload form
<form id="imageupload" action="./uploadres.php" enctype="multipart/form-data" method="post">
<input type="file" name="file" value="Ekle" accept="image/*" size="20">
</form>
Auto upload script when user selected file
$("input[name='file']").change(function() {
this.form.submit();
});
Show/hide loading image function:
$('#loadimg').show();
$('#contents').load(function(){
$('#loadimg').hide();
});
What I am trying to do is showing loading image while its uploading. What is the correct way to integrate the Show/hide loading image method into my form submit ?
If you are doing a full HTML post, then you only have one option:
Using the form's onsubmit event to display the uploading symbol. This will be cleared when the new HTML is downloaded.
On the other hand, if you are using jQuery to submit the form, there are a several excellent ways to handle that.
I'd point you to this discussion for an overview.
So I have this html code for an image:
<a href"hurr.php" onclick="post"><img src="images/img1.png"/></a>
I also have other images on the same page that also link to hurr.php. What I want to do is for hurr.php to be a custom page that displays information based on which image was clicked to get to the page. So, for example, I would use the php echo function to display img1.png rather than img2.png.
Is the code I have for the image right, and what code do I need to display on hurr.php in order to display custom information on each image? I want to use 'post' for this.
<img src="images/img1.png"/>
<form id="form_name" name="form_name" action="hurr.php" method="post">
<input type="hidden" id="image_name" name="image_name" value="" />
</form>
There is two way of doing this, if you have to use POST variable then you need to use AJAX,
or you can send the GET variable.
<img src="images/img1.png"/>
In hurr.php
you can get the variable by either $_GET['myVar'] or $_REQUEST['myVar']
I am creating a responsive mobile website, and I want to be able to take and then upload a picture from the device. I have got this part working using
<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
</form>
Now, what I am having trouble with is, after I have selected the picture that I want to use I do not know how to reference it later in my code. The reason I need to is I am using a .js library which allows me to upload a picture of a ISBN barcode and the .js file will read this file and spit out the ISBN as text which I will do more with later. (maybe link this to a Google Books API)
This is where I am getting the barcode scanner .js from: http://badassjs.com/post/654334959/barcode-scanning-in-javascript
I am relatively new to all of this, thanks for your help.
You will have to use ajax. This link contains some useful information for you.
Use ajax to get the picture uploaded and in the response, return the url or "failed". Then you can use in your js code,
if(response=="failed"){
//Handle upload failed
}
else {
//Handle url. Here response is your url actually.
// So to append the image to a given id, you would use,
$("#append_to_id").append("<img src='"+response+"'>");
}
Since the JavaScript library you are using is parsing an image on the page,
you have to show the image on the page after you have uploaded it.
So basically you need 4 steps to achieve this:
show an upload form (This is what you have done in the question);
grab the image uploaded in step 1 and save it to an accessible place
display the image on the screen
call get_barcode_from_image.js to parse it
Here's a piece of code for reference. It contains all the 4 steps above.
<?php
// step 2: save the image
if ($_FILES['myfile']['error'] == 0) {
move_uploaded_file($_FILES['myfile']['tmp_name'], 'u/barcode.jpg');
?>
<!-- step 3: show the image -->
<img src="u/barcode.jpg" id="barcode">
<script src="get_barcode_from_image.js"></script>
<div id="result"></div>
<!-- step 4: parse the barcode -->
<button onclick='document.getElementById("result").innerHTML = getBarcodeFromImage("barcode")'>scan</button>
<?php
}
?>
<!-- step 1: show the upload form -->
<form method="post" action="barcode.php" enctype="multipart/form-data">
<input type="hidden" name='a' value='b'/>
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
<input type="submit" value="submit" />
</form>
Of course you can use ajax or so to get better user experience, but the process won't change.
I am trying to upload an image in html page using the <input type="file"> element. I want to use the uploaded image to replace another image on the page. However, the control does not pass onto the java script function. Am trying to find out why the control does not pass. Below is the code I am using:
<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>
<div>
<form name="image1" enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
<input type="file" name="imgfile"></input>
</form>
</div>
Thanks in advance.
You can't intercept a file upload in Java Script. The file has to be uploaded to the server, and then the page has to be rerendered
One approach would be using AJAX to query the backend on where the image was uploaded.
Like so
var pullImage = function()
{
// do ajax work
return image ? propagateHTML('element', image.uri) : fallback();
}
var propagateHTML = function(id, uri)
{
document.getElementById(id).innerHTML = uri;
}