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.
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 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;
}
In my web app,I need to upload a single file when a user selects that file and stay on the same html page.I am looking for a non-flash solution which probably uses jquery.and something which works on firefox.
By googling,I came across many plugins,most of them using elaborate html pages for showing input widgets / upload status indicators etc.I need something which I can use like this,using ajax.
mypage.html
<input type="file" id="myfileselect" > </input>
myjs.js
$(document).ready(function(){
$('#myfileselect').change(function(e){
//upload the file somehow
}
});
Is this possible?Can someone illustrate how I can do this?
I use this plugin in all my projects. Once the user selects the file, you simply call
$('#yourForm).ajaxSubmit()
and it will asynchronously upload your file.
http://jquery.malsup.com/form/
In your case, you would do it like this:
HTML
<form id="myForm">
<input type="file" id="myfileselect" > </input>
</form>
JQuery
$(document).ready(function(){
//set the options here
var options = {
url : 'yourScript.php',
method : 'post'
};
$('#myfileselect').change(function(e){
$('#myForm').ajaxSubmit(options);
}
});