According to this: http://jsfiddle.net/Shiboe/yuK3r/6/ I can do it without any problem.
But,
I have got a multiple attribute in my input element and if i want to upload for example 8000 files catchEvent() function print out 0. Is any solution of this problem?
$(document).ready(function(){
$("#testInput").on('click', function(){
run();
});
function run(){
document.body.onfocus = catchEvent;
}
function catchEvent(){
console.log(document.getElementById("testInput").files.length);
document.body.onfocus = null;
}
})
<input id="testInput" type="file" name="test" multiple="multiple" />
You can get file info as follow code:
godzilla.onchange= function(){
var files = $(this)[0].files;
if (files.length > 0){
console.log("file selected="+files.length);
}
};
Related
How to not open the file upload box when input mytextField is null.
<input type="text" id="mytextField">
<input type="file" multiple id="myFileUpload">
<script>
document.getElementById("myFileUpload").addEventListener("click", function () {
var myTextF = document.getElementById("mytextField");
if(myTextF = null || myTextF == ''){
//will not open the file upload
} else {
//let the file upload open
}
});
</script>
You can disable the upload button when textarea is empty and enable it when textarea contains text.
<input type="text" onkeyup="checkField()" id="mytextField">
<input type="file" multiple id="myFileUpload" disabled="disabled">
script:
function checkField(){
var myTextF = document.getElementById("mytextField");
if(myTextF.value.trim() != ""){
document.getElementById("myFileUpload").disabled = false;
}
}
Used the trim() function to prevent empty whitespace texts.
Here you are assigning myTextF to the element, rather than the innerText.
Try with var myTextF = document.getElementById("myTextF").innerText;
If something doesn't work, you could always try to log the output to the console.
In this case, because you are assigning the element, that resolves as TRUE, and it will always try to open the file.
document.getElementById("myFileUpload").addEventListener("click", function () {
var myTextF = document.getElementById("mytextField");
if(myTextF = null || myTextF == ''){
//will not open the file upload
console.log("I should not open file")
} else {
//let the file upload open
console.log("I should open the file")
}
});
" I should open the file"
I am checking the file size and extension of a file before it is uploaded, and (for the most part) the code is running correctly. However, I am unable to remove the disabled attribute from the submit button if the file has the correct extension and is under 2MB. I feel as if there is something minor I am not seeing or forgetting. I would appreciate any help or tips.
Thanks,
-Kyle
Here is my code:
<p>Select a logo to upload</p>
<input type="file" id="uploadFile" class="upload" name="upfile"><br>
<input type="submit" id="uploadSubmit" value="Upload Image" disabled="disabled">
document.getElementById("uploadFile").addEventListener("change", checkFile, true);
function checkFile(e) {
var files = e.target.files;
for (var i = 0, file; file = files[i]; i++) {
var fileName = file.name;
var fileExt = fileName.split(".")[fileName.split(".").length - 1].toLowerCase();
var fileSize = document.getElementById("uploadFile").files[0].size;
var fileSizeMB = (file.size / 2097152).toFixed(2);
if (!(fileExt === "jpg" || fileExt === "eps" || fileExt === "tif" || fileExt === "tiff") || fileSize > 2097152) {
alert("There is an error with the file you selected. Please check the file size and/or the file type.");
} else {
$("#uploadSubmit").prop("disabled", false);
}
}
};
Try
$("#uploadSubmit").removeAttr("disabled");
Hope it helps.
Sorry I can't just comment because it requires at least 50 reputation, wtf!
check if you have jQuery, I notice you're using getElementById at the beginning and somehow you're using jQuery selector for uplaodSubmit. Other than that, syntax looks correct to me.
And if you want to stick with pure JS, use:
document.getElementById('uploadSubmit').disabled = false
instead.
Good Luck.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
</head>
<script>
$(function() {
$('#uploadFile').bind('change', function() {
var filename = this.files[0].name.toLowerCase();
if ((filename.indexOf(".jpg") > -1)
|| (filename.indexOf(".png") > -1)) {
if(this.files[0].size<2000000){
$("#uploadSubmit").removeAttr("disabled");
alert("This is your solution");
}else{
alert("You cant get bigger than 2 MB");
}
} else {
alert("File format must jpg or png");
return false;
}
});
});
</script>
<body>
<p>Select a logo to upload</p>
<input type="file" id="uploadFile" class="upload" name="upfile"><br>
<input type="submit" id="uploadSubmit" disabled="disable" value="Upload Image">
</body>
I tried this I think this more helpful for you
$("#element").attr("disabled", false) OR $("#element").removeAttr("disabled").
I hope this first example is better with new jQuery version.
I want to show the file name while uploading the file.For that i used the hidden field.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
javascript is
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
How can I do this?
If you just need the filename:
$('#my_file').change(function(){
var filename = $(this).val().split('\\').pop();
});
You can do this:
$("input[type='image']").click(function () {
$("input[id='my_file']").click();
});
$("input[id='my_file']").change(function (e) {
var $this = $(this);
$this.next().html($this.val().split('\\').pop());
});
FIDDLE
I'm using JavaScript to validate an uploading form, one of the conditions is to check if any file has been selected. I thought this would be simple, but I can't get it to work. Is this code invalid? The var file works with other conditions so it's not that
var file = document.getElementById('file');
if(file.value =="") {
alert("no file selected")
return false;
}
<input name="uploaded" type="file" id="file" />
You can use the following example:
var fileInput = document.getElementById('file');
fileInput.onchange = function () {
var input = this.files[0];
if (input) {
//process input.
} else {
alert("Please select a file.");
}
};
Hope this helps.
JSP:
----
<div ID="items">
input id="file5" type="file" path="files" name="files" size="40" /> Other documents
</div>
Javascript:
-----------
<script type="text/javascript">
var items=1;
function AddItem() {
var div=document.getElementById("items");
var button=document.getElementById("add");
items++;
newitem="";
newitem+="<input type=\"file\" path=\"files\" name=\"files\"";// + items;
newitem+="\"id=file"+items;
newitem+="\" size=\"40\"> Other documents";
newitem+=" <input type=\"button\" class=\"button\" id=\"delButton"+items;
newitem+="\" value=\"\" name=\"button"+items;
newitem+="\" onclick=deletethisRow("+items+")>";
newnode=document.createElement("div");
newnode.setAttribute("id","child"+items);
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
function deletethisRow(obj){
var fileElement=document.getElementById("file"+obj);
var buttonElement=document.getElementById("delButton"+obj);
var childDivName="child"+obj;
if (buttonElement) {
var child = document.getElementById(childDivName);
var parent = document.getElementById("items");
parent.removeChild(child);
}
}
</script>
---
Above is the JSP code as well as JavaScript snippets.. I'm trying to validate the input files....
I want to allow only jpg,png,pdf,doc,docx file types to be upload??
Any thoughts on how to achieve this?
Thanks and regards,
Satish Krishnamurthy
You can change your input tag:
<input type="file" name="pic" id="pic" accept=".someext, image/gif, image/jpeg" />
But please don't rely on client-side validation. Check it server-side or people can disable the client-side checks and upload even executable scripts.
function Checkfilesextension()
{
var fileToupload = document.getElementById('elementId');
var fileName = fileToupload .value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
ext.toLowerCase
if(ext =="GIF" || other extension) // add other extensions
{
return true;
}
else
{
alert("Upload only the allowed files");
return false;
}
}
This would check for the extension of the files....have not tested the code though