Some background information:
Users are able to input some book information and upload book cover image file through HTML form. Before they input information manually, they could use Google Book API to find some information, and by just click a button, some fields will be automatically filled using the information from Google Book API. For book cover image, Google API returns the image url, so I am trying find a way to transfer this url to a file object. Therefore, when users click the button to fill form using information from Google API, the image will be automatically uploaded there from image url.
I have an image url such as: http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api
And I created an HTML form that allows users to upload their images.
<div class="form-group">
<label for="book cover">Book Cover</label>
<input type="file" class="form-control" name="book cover" accept="image/*" required>
</div>
Now I want to use JavaScript to transfer the image url to a file object and then prefill this file input for some users.
How can I achieve this using JavaScript? Thanks!
For your case, I think you must save the link to input hidden and submit to server side to get that image.
If you want to show the preview for user, just create a <img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> on your form.
Put hidden input to keep the link from user:
<input type="hidden" name="image-url" value="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api">
<img src="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api"/>
And then, you have to take action download this image on your server side.
Please use below code to make it working :
Function
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
HTML Form view
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
Related
I have upload documents button, from where I can upload images, docs, pdf files and excels. I want to display preview of these selected files.
I am able to display preview of images and PDF files, but not getting how to display preview if file is doc or excel file.
Here is my generic code for displaying preview of a file.
HTML Code is:
<input type="file" name="medical_doc" multiple="multiple" onchange="PreviewDocument('wildlife');" id="preview_animal_doc_wildlife">
JS Code is:
function PreviewDocument(type) {
var outerDiv = document.createElement("DIV");
outerDiv.setAttribute("class", 'col-md-2 document-col');
outerDiv.setAttribute("id", 'append_animal_doc_preview_div');
var outerImage = document.createElement("EMBED");
outerImage.setAttribute("class", 'img-doc');
outerImage.setAttribute("src", e.target.result);
outerDiv.appendChild(outerImage);
}
This code works fine if chosen file is PDF and/or Image, but not working for doc or excel files. Any idea of how to display preview of doc and excel files?
function ReadURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgFile').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function(){
$("#imgInp").change(function() {
ReadURL(this);
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="imgFile" src="#" alt="your image" />
</form>
you are not able to show excel and doc file because browser is not supporting that file preview for that purpose you need extra third party control to render that file in to your browser. without data it is not possible.
If your file was excel you can read it as JSON as here
then choose apart from JSON and show it in table
and if it was doc when you read it with FIleReader() which is builtin javascript
as readAsDataURL the e.target.result will be a string so choose like the first 5 lines and show it in a div.
This is what I have in HTML:
<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">
The image with an id of "image" automatically loads a default image from a designated directory by default. Then, the user can I pick an image from the file picker. When the user hits the submit button written on the last line, The uploadImg() written on javaScript file will get the image from input and change the image displayed.
But, my question is how I can enable the user to change the image by just picking a image file from the directory without hitting the "submit" button.
You can add a change listener to the image input:
document.querySelector('#imgPath').onchange = () => {
console.log('Now uploading...');
// uploadImg();
};
<input type="file" name="pic" accept="image/*" id="imgPath">
Take a look at this Why can't I do <img src="C:/localfile.jpg">?. If your plan is to display an image before uploading to the server, that is not going to work. What you can do is write an "onchange" event (https://www.w3schools.com/jsref/event_onchange.asp) to your file selection input line (2nd line in your code), and upload it to a temporary directory and display it. As the user clicks on the upload button, you can make the change permanent. If the user cancels, you will display the default profile page.
On my website I need that form to upload an image and i made this function using javascript to show that image live after selected. I'm doing validation for all the fields on the form.
My problem is my image is disappearing when i click submit but my others fields take the value user entered it self. please help me to keep this value weather error or not.
javascript
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
html
<img alt="Not selected" id="uploadPreview" style="width: 200px; height: 180px;" />
<input id="uploadImage" value="<?php echo $pht1; ?>" type="file" name="pht1" onchange="PreviewImage();" />
This is not possible. For security reasons you cannot pre-set the value of a file field. Your best bet would be to add some client-side validation for the file field so the form cannot be submitted until it is correct.
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']."'>";
just a quick question. I'm stuck trying to find out if this is possible but what I have is a form that a user can enter information about a product. I'm saving the information entered by the user in a session variable. When the user hits the submit button the form doesn't submit it into the database but it takes them to a review page. The user can then review their entered details and once happy they will finalise it from that new page. The user can select a file(image) in the first form which I need it to display as an image on the second page.(review page)
I know this code will display an image once the user selects a file. But how, if possible, can I display this image on the second page?
JS
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
HTML
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
So like I said, this will show the image as soon as the user selects the file, but I need to use
<img id="blah" src="#" alt="your image" />
on the second page?
Any ideas? A million thanks in advance
Peter
Well,Question seems to have more then one ideas at once
You can not store this at the client side
So
First,You can store that image into a temp folder and the if use confirms his submissions then copy into your main folder
Also,Second
you can convert this image into a base64 or byte to session and then display by converting this values to image and make sure that this sessions getting null after submission of user
I am sharing you a link which will help you to accomplish
https://stackoverflow.com/a/12396875/2630817
Storing image path in a variable