Removing/Clearing all selected files via the File Input button - javascript

I'm using the input element in HTML with the file type option, IE: <input type="file" /> with the option of allowing multiple files to be selected.
However, I'm wondering if there's a way to remove or clear all of the files that the user selected via the file type button though a click of a button.
Basically, here is what I have so far:
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="" />
I have no idea how to implement that second button.

There is a trick: Redraw the HTML block! Source
<div id="container">
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="clearSelection();" />
</div>
//Javascript
function clearSelection() {
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML;
}

Related

Automatically show form value on page load or submit using .innerHTML

I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>

Multiple file upload doesn't work (do I need javascript here?)

Here is my html form:
<form id="formulir" method="post" enctype="multipart/form-data" action="config-template-ecomerce.php">
title-file<input name="title" type="text" id="title"/><br>
color-one<input name="color-one" type="text" id="color-one"/><br>
<img id="uploadPreview" style="width: 100px;" /><br>
image<input type="file" name="image[]" id="image" onchange="PreviewImage();" multiple="true" /><br>
submit<input type="submit" name="button" id="button" value="Submit" />
</form>
From the html form above, I want to select multiple file with one browse botton.
After I select one file with the browse botton, then the file of image will be changed if I select another file of image. What I want is the file is added not changed.
Do I need a script for this? I have tried this in three browsers: chrome, opera and mozila.
According to our discussion in chat, you want to generate upload button dynamically. I can give you an example:
Suppose you have one upload button in html like this:
<body>
<form>
<input type="file" name="upload1" id="upload1"/>
</form>
</body>
Then, you can add another upload button on Click event on previous button using jquery:
$(function(){
$('#upload1').on('click',function(){
var r= $('<input type="file" value="new button"/>');
$("form").append(r);
});
});
JSFIDDLE DEMO HERE

click on input box to show open file dialog but not click on choose file button

I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type="file", it will show the "choose file button", I dont wan to show the button. How can I do it?
html:
<div class="fileupload">
<input type="file" class="file" name="image" />
</div>
<div class="fileupload">
<input type="file" class="file" name="attachement" />
</div>
http://jsfiddle.net/EctCK/
** I dont wan this, how do I hide the choose file button?
You can overlay a transparent <input type="file"/> over a styled button or other element.
<input type="file" style="opacity:0;"/>
See this JSFiddle for a working demo.
Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.
HTML:
<div id="dummy" class="dummyDiv">
<span>click to chose file:</span>
<span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
<input type="file" id="flupld" />
</div>
JS:
$("#dummy").click(function () {
$("#flupld").click();
});
$("#flupld").change(function () {
//file input control returns the file path as C:\fakepath\<file name>
//on windows, so we remeove it and show only file name.
var file=$(this).val().replace(/C:\\fakepath\\/ig,'');
$("#fileName").text(file);
});
try it:
<input type="file" id="upload" style="display:none">
Upload
Working sample on JSFiddle

HTML5: Change button focus when using another input box

I am making an HTML5 page with multiple forms. Each input box has its own submit button to convert the temperature unit into another (Celsius to Kelvin, etc.). What tags or attributes do I need to make the submit button focus when its input box is focused or typed in by the user?
Javascript (made from coffeescript) is used in this file. There is no CSS.
You can use javascript for this
write onfocus="hilight(form_number);" on each input box.
and in your function you can hilight the button
<form name="form1">
<input type="text" onfocus="hilight(1)" />
<input type="submit" id="btn_1" class="button" />
</form>
<form name="form2">
<input type="text" onfocus="hilight(2)" />
<input type="submit" id="btn_2" class="button" />
</form>
<form name="form1">
<input type="text" onfocus="hilight(3)" />
<input type="submit" id="btn_3" class="button" />
</form>
<script>
function hilight(opt)
{
document.getElementById('btn_'+opt).style('','');//you can add any styles to button here
}
</script>
Have you tried using the onblur event of the input box to set the focus to the respective submit?

Custom browse button to upload a fle

Hi I have currently custom 2 button called Browse and Import. I also have a input type as a text. My question is how i can browse and select a record and place in input type text
Please advise
<input type="button" id="btnBrowse" value="Browse" onclick="document.getElementById('fileID').click(); return false" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="submit" id="btnSubmit" value="Import" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
You can however customize nearly any other html element.
Here is a complete solution:
<input id="btn" type="file" style="display:none;" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1);">
<input id="file" type="text" style="width:200px;">
<input type="button" onclick="document.getElementById('btn').click();" value="click me" />
Of course you can style a file input button. This has been covered over, and over, and over again on SO. For example, Labeling file upload button.
you can use
<input type="file"/>

Categories

Resources