I have input with <input type="file" id="logo" name="logo" ng-model="logo" required="required">. When I load page it is like:
When I select file:
How can I load the page, so that already saved file in server retrieved gets like:
Not this:
Related
I have an .xlsx file and a html file with an < input type="file">. I just need upload it and send it to a php file (with js or any other way).
The php file expects an .xlsx file (for this reason I dont parse the .xlsx.) if I load it direct in the php file, works perfectly but I need to upload through an user interface, in this case an html view.
Regards.
Update:
Now the .html looks like this:
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
And the .php looks like this:
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel'];
$xlsx = new SimpleXLSX('pricesExcel.xlsx'); //the file directly uploaded that I need to send from html.
...
?>
But now I have the next error:
Undefined index: excel in ...\excel_to_mysql.php on line 2.
Why doesn't recognize the name?
You need a bit of tweaking in the html and in the PHP part
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST" enctype="multipart/form-data">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
Note the enctype="multipart/form-data". That's needed to actually send the file.
The in the PHP file
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel']['tmp_name'];
$xlsx = new SimpleXLSX($file); //the file directly uploaded that I need to send from html.
...
?>
$_FILES['excel']['tmp_name'] contains the full path to the uploaded file, note that you can't rely on the name having the '.xlsx' extension, cause the file gets a random name for security purposes.
I strongly suggest you to use the file from within the temporary directory, and to delete it after use.
If the SimpleXLSXclass needs the '.xlsx' extension to work properly, you can try to add it to the temp file
rename($_FILES['excel']['tmp_name'],$_FILES['excel']['tmp_name'].'.xlsx');
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.
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 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.
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.