CODEWITHSUNDEEP
javascriptjqueryhtml
0xtuytuy
0xtuytuy

Reputation: 1654

javascript - action when file selected

I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:

function showNoFile() {
    if(document.getElementById("video-file-upload").value != "") {
   		alert("yeap");
   }
}
/*****************
   UPLOAD BUTTON
******************/

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin:10px;
}

.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}

.file-wrapper .button {
  background: #F3A662;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
							<span class="file-wrapper btn ad-choice">
								<input type="file" name="file" id="video-file-upload" /> 
								<span class="button">Choose a video</span>								
							</span>						
							<br/>		
							<input type="submit" name="submit" value="Submit" />
						</form>

Upvotes: 2

Views: 72

Answers (3)

Jai
Jai

Reputation: 74738

with javascript:

function showNoFile() {
   if(this.value != "") {
      alert("yeap");
   }
}

document.getElementById("video-file-upload").onchange = showNoFile;


function showNoFile() {
    if(this.value != "") {
   		alert("yeap");
   }
}

document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
   UPLOAD BUTTON
******************/

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin:10px;
}

.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}

.file-wrapper .button {
  background: #F3A662;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
							<span class="file-wrapper btn ad-choice">
								<input type="file" name="file" id="video-file-upload" /> 
								<span class="button">Choose a video</span>								
							</span>						
							<br/>		
							<input type="submit" name="submit" value="Submit" />
						</form>

Upvotes: 0

dowomenfart
dowomenfart

Reputation: 2803

if (document.getElementById("video-file-upload").files.length == 0) {
  alert("yeap");
}

Check for files.length is equal to 0.

Upvotes: 0

Pratik Joshi
Pratik Joshi

Reputation: 11693

use it on DOM ready 

$("#video-file-upload").change(function(){
    if($(this).val() != ""){
     alert("some file selected");
    }
});

Fiddle

Upvotes: 2

Related Questions