Add a text in the background of a input file - html

Question

I have this simple form for uploading files:
<form method="post" action="">
<input id="holder" type="file" style="padding: 5px; width:100%; height:100px; border: 5px dashed #ccc">
</form>
http://jsfiddle.net/e98b2w7s/
But now I need a way to add this text in the background inside the dotted area:
"or Drag and Drop your file here"
Is there a way to do that?

Answer 1

You may do better to just set your styles to your form instead, in which case you can just give the form itself the background image for a bit of a cleaner solution:
Edit: Removed background image to show with text instead for a cleaner approach.
form {
padding: 5px;
width: 100%;
height: 100px;
border: 5px dashed #ccc;
}
form h1 {
text-align: center;
color: #ccc;
}
<form method="post" action="">
<input id="holder" type="file">
<h1>Drag & Drop Files Here</h1>
</form>
You don't need to use a background image, however, you could just create an h1 that says "Drag & Drop Here" and then use an SVG or FontAwesome to add the cloud and/or arrow icons.

Answer 2

Please try below solution
<form action="youractionfile.php" method="POST">
<input type="file" multiple>
<p>Drag your files here or click in this area.</p>
<button type="submit">Upload</button>
</form>
CSS
<style type="text/css">
body{
background: rgba(0,0,0,0.9);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 170px;
color: #ffffff;
font-family: Arial;
}
form input{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form button:hover{
background: #149174;
color: #0C5645;
}
form button:active{
border:0;
}
</style>
below javascript code
$(document).ready(function(){
$('form input').change(function () {
$('form p').text(this.files.length + " file(s) selected");
});
});

Answer 3

As you mentioned a question here I'm posting my answer
$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({ top: y - 15, left: x - 100 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({ top: y - 15, left: x - 160 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function (e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
})
#drop-zone {
/*Sort of important*/
width: 300px;
/*Sort of important*/
height: 200px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
border: 2px dashed rgba(0,0,0,.3);
border-radius: 20px;
font-family: Arial;
text-align: center;
position: relative;
line-height: 180px;
font-size: 20px;
color: rgba(0,0,0,.3);
}
#drop-zone input {
/*Important*/
position: absolute;
/*Important*/
cursor: pointer;
left: 0px;
top: 0px;
/*Important This is only comment out for demonstration purposes.
opacity:0; */
}
/*Important*/
#drop-zone.mouse-over {
border: 2px dashed rgba(0,0,0,.5);
color: rgba(0,0,0,.5);
}
/*If you dont want the button*/
#clickHere {
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: 20px;
line-height: 26px;
color: white;
font-size: 12px;
width: 100px;
height: 26px;
border-radius: 4px;
background-color: #3b85c3;
}
#clickHere:hover {
background-color: #4499DD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
or Drag and Drop files here
<div id="clickHere">
or click here..
<input type="file" name="file" id="file" />
</div>
</div>

Answer 4

Html:
<input id="holder" type="file" placeholder="or Drag and Drop your file here" />
<label for="holder"> or Drag and Drop your file here </label>
Css:
[type=file] {
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
input,
[type=file] + label {
border: 1px solid #CCC;
border-radius: 3px;
text-align: left;
padding: 10px;
width: 150px;
margin: 0;
left: 0;
position: relative;
}
Js:
$("[type=file]").on("change", function(){
// Name of file and placeholder
var file = this.files[0].name;
var dflt = $(this).attr("placeholder");
if($(this).val()!=""){
$(this).next().text(file);
} else {
$(this).next().text(dflt);
}
});
Working example here. Hope this work