I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this?
<input type="file" />, which renders a choose button with text that says `no files chosen` in the same line.
Is it possible to customize the text "no files chosen" below the choose button? I also wish to include a camera image before the no files chosen text.
How can I implement this to enhance my site?
Thank you
To conceal the input field, you can enclose it within a div with a height of 0px and overflow set to hidden. Then, you can create a button or another HTML element that you can customize to your liking. When this button is clicked, you can use JavaScript or jQuery to trigger a click on the hidden input field:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>
<script>
function chooseFile() {
$("#fileInput").click();
}
</script>
By following this approach, the input field remains hidden, allowing you to design the button as per your requirements while ensuring that clicking it always triggers the file input selection.
If you prefer not to use jQuery, you can replace the script tag with the following vanilla JavaScript code:
<script>
function chooseFile() {
document.getElementById("fileInput").click();
}
</script>
Here's a creative solution I experimented with today for one of my projects!
HTML
<div class="custom_file_selector">
<span>Select File</span>
<input name="Choose File" type="file" />
</div>
CSS
.custom_file_selector{
position:relative;
display:inline-block;
border-radius:8px;
border:#ebebeb solid 1px;
width:250px;
padding: 4px 6px 4px 8px;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background:white
}
.custom_file_selector input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
You have the capability to personalize it solely utilizing CSS. Take a look at the provided link for more information.
HTML
<label class="btn-upload">
<input type="file" name="fileupload">
<button class="btn">Browse</button>
</label>
.btn-upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-upload input[type=file] {
position: absolute;
opacity: 0;
z-index: 0;
max-width: 100%;
height: 100%;
display: block;
}
.btn-upload .btn{
padding: 8px 20px;
background: #337ab7;
border: 1px solid #2e6da4;
color: #fff;
border: 0;
}
.btn-upload:hover .btn{
padding: 8px 20px;
background: #2e6da4;
color: #fff;
border: 0;
}
<div>
<style>
.picture{
position:relative;
display:inline-block;
width:3%;
padding: 0%;
}
.picture input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
</style>
<div class="picture">
<span><img src='admin/ico/fms.ico' class "picture"></span>
<input name="image" type="file" />
</div>
</div>
Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...
A JavaScript snippet provided below will load a CSV file named numericalData.csv, which contains headers in the first row and numerical values starting from the second row. The data is then displayed using a Google Visualization Table. I am looking to con ...
I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...
I attempted to replicate the impressive wave simulation from this CodePen link: https://codepen.io/cheekymonkey/pen/vMvYNV, using Vue.js. However, the animation seems to be running significantly slower when implemented in Vue.js. In my effort to recreate ...
My webpage has four tables, each containing rows with two text boxes filled with numeric values from the server. However, something peculiar occurs. When I add data to a row, let's say row 1, and then refresh the page, two values are mysteriously mov ...
How can I set a full-screen background image that adjusts to the body width without horizontal scrolling, maintains height proportionate to width, and allows for vertical scrolling? Here is my current code: html, body { margin: 0px; padding: 0px; } bo ...
Looking for guidance on using jQuery form posting on an ASP.NET page with 2 text boxes and a drop down list instead of normal post back. How can server side controls be accessed in the action page without passing everything via query string? Any advice o ...
I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...
I am encountering an expression expected error in Visual Studio near if(isNullOr ........ if (value) { if (isNullOrUndefined(x.value) && isNullOrUndefined(x.value2)) { x.minMark + '-' + a + '*' + x.b + ' ' + ...
When using jQuery, I need to append a multiline string to an element by adding a string return from each value in a for loop. $("songs-table-tr").append('tr id="songs-table-tr'+count+'" style="display: none">\ ...
Imagine having some Cloud Code running on a Parse Server: Parse.Cloud.beforeSave("UserProfiles", function(request, response) { const query = new Parse.Query("UserProfiles"); query.equalTo("user", request.user); query.count({ success: f ...
When attempting to run a test case on a Selenium Node.js server, an error was encountered: Error: ECONNREFUSED connect ECONNREFUSED. The test case script is as follows: var assert = require('assert'), test = require('selenium-webdriver ...
I am intrigued by the vast array of new possibilities available, but I find myself lacking in knowledge when it comes to Html5. One way to minimize the usage of IE6 and propel us into a more advanced era is to fully embrace new technologies like HTML5. Ho ...
<script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } </script> <p text-align="right" id="demo" style="font-family:Comic Sans ...
When using numInOrder + " : " + nameInOrder;, the console only displays one value: "1 : a". However, I would like to see: "1 : a 2 : b 3 : c 4 : d 5 : e 6 : f" in the console.log output. Additionally, I do not want to use consol.log(numInOrder + " ...
I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...
I've been diving into the world of Angular.js and came across this code snippet: <button ng-class="{'btn pull-left', duplicatesInList === true ? 'btn-warning': 'btn-success'}" id="saveScoreButton" type="button" ng-c ...
Here is my webpack configuration file and package.json. When I execute the command webpack -w, I encounter the following error (shown below). I suspect it may be related to path strings. Any help would be greatly appreciated. webpack.config.js const HtmlW ...
Encountering an issue where the code is calling a Modal, but upon loading it fails to populate the controls with values sent into the JavaScript. No errors are thrown, yet all controls remain empty. As a newcomer to AJAX and JavaScript, I suspect there mig ...
Below is the code snippet that I am working with: <td> <WarningAmberIcon sx={{ color: '#cc0000' }} /> If you cannot print in colour, please <a href="https://www.aviva.ie/insurance/car-insurance/faqs/#do ...