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;
}
Related
I've a form which contains following file upload control and image control:
<form action="rebate_preview.php" role="form" method="post" enctype="multipart/form-data">
<input type="hidden" name="hidden_path" id="hidden_path" value="">
<input type="file" name="rebate_image" id="rebate_image">
<img id="rebate_old_image" src="#" alt="your image" width="80" height="80"/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Here I'm enabling the user to see the preview of the image he selected for upload without actually uploading the image to server using following jQuery code :
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#rebate_old_image').attr('src', e.target.result);
$('#hidden_path').val(e.target.result)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#rebate_image").change(function(){
readURL(this);
});
});
Now the problems I'm facing is I'm not able to show the same image preview on the next page i.e. on a file "rebate_preview.php" after form submission using image control. The next issue I'm facing is how should I store the values from array $_FILES on the page rebate_preview.php?
Remember still the image uploaded by user is not yet uploaded to the server.
The page rebate_preview.php is just a preview page with some other fields to preview the details.
How should I show this image on the page rebate_preview.php using image control and how should I store the $_FILES array data?
I had this problem a short while back when I was building an application, the best thing to create an OBJECT URL from the selected image when you select the file, you can then set your img src to that OBJECT URL data, which will render it to the page, for example lets say you have a file input with the id image_file. you could do this:
// Preview the image on the page
$('#image_file').change(function(e) {
var selected_file = $('#image_file').get(0).files[0];
selected_file = window.URL.createObjectURL(selected_file);
$('#preview_image').attr('src' , selected_file);
});
The source is now the BLOB representation of the image, you can then submit your form to upload the image or select another image to update the preview, hope this helps :)
Simple Solution?
in PHP script just do:
print "<img src='".$_POST['hidden_path']."'>";
I am developing a chrome extension with an option page. On that page I put an upload image option but can't get the file to load in javascript. I have tried many solutions (1st solution, 2nd solution ...) but none worked. The strange thing is, that even an "onclick" attribute in the html code doesn't call the corresponding function. Here is an example of the code:
HTML example:
<input type="file" name="uploadImage" id="uploadImage" />
<button type="submit" id="imageUpload-btn" onclick="myFunction();">Upload</button>
javascript example:
jQuery("#imageUpload-btn").click(function(){
var image = new Image();
image.src = jQuery("#uploadImage").val();
alert(image.src);
image.onload = function(){
alert("on load");
}
image.onerror = function(){
alert("error");
}
});
I get the path of the file in the first alert, but then always the error alert. The function "myFunction()" is not called, but if I open the file directly in a browser the "onclick" trigger works and "myFunction()" is called.
What am I doing wrong or what am I missing?
<form name="Upload" action="#" enctype="multipart/form-data" method="post">
<p>Filename: <INPUT type="file" name="submitfile" id = "submitfile" />
<INPUT type="button" value="Send" onClick="checkSize();" />
</form>
here you are using enctype="multipart/form-data" in this type we dont have opertunity to use
im.src = document.getElementById('submitfile').value;
you need to go for apache.commons.fileupload ServletFileUpload.isMultipartContent(request); which is totally java related.
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.
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);
}
});
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.