I have a basic HTML form where the user can select files.
<input multiple type="file" name="file"/>
<input type="submit" name="submit" value="Submit" />
The user will be redirected to this form after clicking on a well specific button (present on the home page). Let's say I have 3 differents buttons.
If the user clicked on button1 I would like to redirect him to mysite/myform.php?var=button1. I would also like to pre-fill the input file with a specific file located server-side : button1.txt
So I know which file is he wanting because of the URL and pick it with PHP code (server-side) and send it to the html page (with javascript).
Is it possible to fill in the form using this way?
Since it is a yes/no question the answer is yes. You need to create a proper form for your need and set the values of those inputs with selected file. You migh want to put them(the variables in that file) in a array or json format(or some other like xml... your choice) so it will be easier for you to traverse the file user selected.
And check this quesiton also.It can help you to create what you want:
Parsing JSON file with PHP
Related
Basically, what I want to do is get data from the server and display on the update page in my project. So over here, I have an image to display and yes, it displays in the <div> to show the image of Taylor Swift. However, I have a problem which I can't find a way to display the file name in the file input itself. (see picture below)
So expected behaviour would be, the file name gotten from the data from the server, would show in the input itself. E.g. taylorswift.jpeg
Is there any way I can do this using javascript? Currently working on a VueJS 2 project.
File input field does not allow to select files or set currently selected file name programmatically due to security reasons. But you could create a sort of fake input field using some approaches, on of which is embedding hidden file input field inside a button element as you can see in this sample.
<button class="fake-file__input-col">
<input type="file" class="fake-file__input" #change="onFileInputChange"/>
</button>
So when you receive image name from server you can use it to display in your fake input, and when user selects a file with this input, his actual selected file name will be displayed as well.
User click the uploader several times to upload multiple files(for example, a.txt, b.txt, c.txt), but server can only receive the last file(c.txt). Is there anything else needed to implement multiple files uploader?
<form action="storeArticle" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple >
<input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>
==========
What I want to implement is like https://stackoverflow.com/questions/ask. User can click the image icon as many times as they want, and finally all the images will be sent to server conrrectly.
When you say they click the uploader several times, do you mean having to open the file explorer each time to add one file? If so, then this will cause it to lose the other files that were previously selected.
The way to fix this is for your users to ctrl/cmd+click each file they want while only opening the file explorer once.
File inputs even remove the selected file when you open a file explorer and then press cancel.
EDIT
Just a thought, I'm on a phone so I can't test this but maybe you can play around with it...
have an input field that will be there from start to finish. When they select their first file, make the button (best to use a <label>) they click no longer open that file input. Instead, append a dynamic file input and make the label's for attribute equal to the dynamically added file input. After you add the dynamic input, create a listener for it so when the user selects a file in that new input it is appended to the original input.files array. Once this happens the process starts all over again, the dynamic input handles the file selection and passes it to the original input when a file is selected.
The reason it is best to hide the actual choose file button is because it can be a bit inconsistent at times. Instead, using the label element with the input element's id as the label's for attribute guarantees that clicking the label will focus the file upload field.
I was going to add this as a comment, but I can't.
Have you tried cloning the input and adding it to the form?
Then when the user selects a file you would could either add the new input, add the new input and hide the "populated" ones, or add the new input and mark the "populated" ones as readonly (you would want to add some method to remove them).
How do I make a file input element do successive uploads?
That is, I want the user to be able to click the upload button and upload file. Then I want the user to be able to click the same upload button and add another file to the uploaded files instead of overwriting all the current files.
I'm assuming this will require some javascript. How do I do this in JS?
I've tried using a
<input type="file" multiple>
element, but it doesn't do what I want. I want to be able to add files to the existing list. The multiple input element overwrites the existing list.
Perhaps I misunderstand what you're asking for, but I believe this may be what you want:
<input type="file" multiple>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple
Edit:
Although ugly IMO and 3rd party, this appears to have the behavior you want:
https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html
I am making a website for a computer science project and have created a search function that lists data in an SQl database (based on the search text".
When I click on one of the listed values, I want it to automatically fill in an input box on another page.
I have already looked online and didn't really understand it all which is why I am asking.
You may want to have something like:
on page1:
link
and on page2:
<form ...>
<input type="text" name="..." value="<?= $_GET['foo']; ?>" />
...
</form>
You could also create a form in page1 to send data with the POST method (to hide data from within the URI).
What you should search is how to send and retrieve data with GET and POST methods.
With the <?= PHP tag you print (echo) the content of $_GET['foo'] variable.
Assumptions
But be careful, you must test variables before to print them (and avoid security issues)
I have a scenario, in this i have to develop pages containing various check box items.
User can select at least one option from that and submit the form.
from the above form, user can select multiple items and proceed to next step.
when user submit form, i have to show next page form data on the basis of user selection.
How can i do that in html and javascript?
or do i need to create this application using php?
(i dont know php)
Can you please suggest me reference links that can i follow to implement this.
You can do it in javascript. On submit, check the checkbox selected and redirect accordingly.
You can do it using javascript. Here's an example form:
<form action="response.html" name="form1" method="GET">
<input type="text" name="param"></input>
<input type="submit" value="submit"></input>
</form>
When you click submit it will redirect to the "action" page you specified, in my case to response.html
In that page the URL will be something like www.mydomain.com/response.html?param=myanswer
You can then pull them apart using javascript e.g.
<script>
document.write(location.search);
</script>
You just have to split this up using methods like 'split', easy to google