This question already has answers here:
How to select multiple files with <input type="file">?
(11 answers)
Closed last month.
I am making an app using HTML CSS and JS by watching a tutorial, the app will merge multiple pdfs but I can't select multiple files I even tried to can the type (when selecting files) to all but it doesn't work
My Code:
<div class="container">
<h1>PDF MERGER TOOL</h1>
<form method="post" action="/merge" enctype='multipart/form-data'>
<div class="form-group">
<label for="exampleFormControlFile1">Select the PDF files you want to merge</label>
<input type="file" class="form-control-file" name="pdfs" id="exampleFormControlFile1" accept=".PDF">
<input type="submit" value="Submit" class="btn btn-primary my-4">
</div>
</form>
</div>
You need to add the multiple attribute to enable multiple files selection.
<input type="file" class="form-control-file" name="pdfs" id="exampleFormControlFile1" accept=".PDF" multiple>
Related
It's confusing to me, I want to get one or more files using an input with multiple attribute.
I have created the following form:
<form method="get">
<input type="file" name="file" multiple />
<br /><br />
<input type="submit" />
</form>
When I select a file and submit the form, at the end of the URL and after the question mark(?) it shows:
?file=fileName.jpg
My problem is that if the user selects two files, they must show both in the URL. Like the following:
?file=fileName.jpg&anotherFileName.jpg
I can actually have more than one file. But no matter how many files I select, it only shows one.
This is not what I'm looking for, it only shows selected photos (http://jsfiddle.net/0GiS0/Yvgc2/).
But I want to submit all the files in the form, using only one <input type="file" />
input type="file" name="file" multiple="true"
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" multiple>
<br /><br />
<button>Submit</button>
</form>
Use post and multipart format to upload files
<form method="get" enctype="multipart/form-data">
<input type="file" name="file" multiple="TRUE" />
<br /><br />
<input type="submit" />
</form>
for got to add multiple = true
You may want to look at these similar problems:
Put brackets after the name attribute
<input id="image" type="file" name="images[]" multiple="multiple">
link:
Multiple file uploader only sends one file
and
Use the files property of that element:
var elem = document.getElementById("id_upload");
var names = [];
for (var i = 0; i < elem.files.length; ++ i) {
names.push(elem.files[i].name);
}
link:
Retrieving file names out of a multi-file upload control with javascript
anyone can help me to implement a search field for a static website, my website doesn't have a database, it's only HTML and CSS.
I want to be able to search files with extension .html in a specific folder called post.
Inside the post folder, there are many files with extension .html
I want to search these files through input field using javascript and output the URL in a div
<div id="search">
<form name="searchForm" action="http://google.com/search">
<input name="query" type="text" value="" placeholder="search" maxlength="250" />
<input name="query" type="hidden" value="site:yoursiteurl"/>
<input id = "submitButton" name="submit" type="submit" value="Search" />
</form>
</div>
Hi I am developing a website where it has form which should be able to submit multiple files. However the requirement is select files one by one so the multiple attribute in file input would not do. I tried to store the files in a array in javascript and then set it to a hidden input but that doesnt work as an array it goes as a object. Please let me know a work around for the problem. TIA.
The code I tried
javascript:
var selectedfiles;
let filetosend=[];
$('#file').change(function(){
var file=this.files[0];
selectedfiles=document.querySelector("#selectedFiles");
selectedfiles.innerHTML +=file.name+'<br>';
filetosend.push(file);
var files=$('#allfiles').val();
$('#allfiles').val(filetosend);
});
html:
<div class="form-group ">
<div class="col-md-4">
<label>Documents:</label><br>
</div>
<div class="col-md-8 upload-file-r">
<input type="file" id="file" name="file" >
<input type="hidden" id="allfiles" name="allfiles[]" >
</div>
</div>
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
I´m generating some divs in an external .js file that are essential for my website. With those divs i create a button on a blade. This button shall call the Controller Method appendright() on click. I know that normally a form ist created to send some data like shown below.
<form method="POST" class="input-group" action="" enctype="multipart/form-data">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}"/>
<input type="text" class="form-control col-lg-3" id="inputValue" name="inputValue" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" onclick="theneededMethod()">+</button>
</div>
</form>
The Problem is that i append everything. All divs and the button are inside of ' ' marks. So trying to call the functon with {{ route('appendright()')}} or url does not work because the method is surrounded with ' ' marks as well.
$('#anchor').append('<div id="'+id+'" class="fontBoxHeading box index start">
<div class="border defaultBorder">
<div class="innerBox notSelected">
<div class="text">
<div class="textPadding">'+sitemapHome+'</div>
</div>
</div>
</div>
<form method="POST" class="input-group" action="" enctype="multipart/form-data">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}"/>
<div class="input-group-append">
<button class="btn btn-success" type="submit" onclick="{{ route('appendright()')}}">+</button>
</div>
</form>
</div>');
Maybe I just need to exclude those ' ' marks somehow. But i don´t know how. I just wannt to call a Controller function appendright().
You can't just call a server side PHP function from a client side JavaScript. If you want to do this you will need to use ajax calls from your JavaScript to reach the server side code.
Make sure you read about the differences between server side and client side code. For example, on this question: https://stackoverflow.com/a/13840431/743016
I have downloaded a website using site sucker and I have all the html files. The website was developed using a CRM (it's my new client's website which I have to upload to my server asap and they don't have credentials for the same). I have a contact form which I want to make it work
Form code:
<form name="contactform" method="post" class="dmRespDesignRow" locale="ENGLISH">
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1289337126">
<label for="dmform-0" id="1623474142">Name:</label>
<input name="dmform-0" type="text" id="1049346235"/>
<input name="name" value="Name" type="hidden" id="1808095320"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1229775582">
<label for="dmform-1" id="1413734224">Email:</label>
<input name="dmform-1" type="email" id="1874224805"/><input name="email" value="Email" type="hidden" id="1790388701"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1182638845">
<label for="dmform-2" id="1659409819">Phone:</label>
<input name="dmform-2" type="tel" id="1363423394"/><input name="phone" value="Phone" type="hidden" id="1562324064"/>
</div>
<div class="dmforminput dmRespDesignCol small-12 newLine large-12 medium-12" id="1310223649">
<label for="dmform-3" id="1594580770">Message:</label>
<textarea name="message" id="1731760981"></textarea>
<input name="message2" value="Message" type="hidden" id="1794081407"/>
</div>
<div class="dmformsubmit dmWidget R" preserve_css="true" id="1012153111">
<input class="" name="submit" value="Send" type="submit" id="1446531284"/>
</div>
<!--<input name="dmformsendto" value="O0wrseIfFLsSlLR4GAldF3Dy0PQjrXVAFxL5GhwSjRb9oqY0OVrc11ouhyoy2GDw/aszBHJnGyRKqT/UtxxJVGSoojrduF5h" preserve_css="true" type="hidden" id="1937799400" data-success-page="" data-dec="true"/>-->
<input class="dmActionInput" name="action" value="form_email.php" type="hidden" id="1733868877"/><input name="dmformsubject" value="Form Message" preserve_css="true" type="hidden" id="1339178452" data-success-page=""/>
</form>
I tried creating a new file i.e form_email.php and adding as action in the form but no luck. If I create a separate form test file (plain html without any classes) it works using that php file but doesn't work when integrating it with the actual form. I am not able to figure out what's the issue.
If you are not using JavaScript to intercept the form the action attribute should be added to the form tag, and not to an input. Example:
<form name="contactform" method="post" action="form_email.php" class="dmRespDesignRow" locale="ENGLISH">
In addition you must make sure that form_email.php is being correctly requested. If the file's location is not within the same directory the HTML file is (or the directory in which the CMS designated as such) you must fix the action attribute so that it points to the correct location. For example, if form_email.php is one level up (in the directory above the HTML file) you would reference it as such: action="../form_email.php".