How to get the date from the uploaded image? - javascript

Image upload form uses following code:
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
I would like to extract the date of the image file which i just uploaded.
<span id="ImageDate"></span>

You could do something like this by using .lastModifiedDate in javascript
$("#Images").change(function() {
for(var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var modifiedDate = file.lastModifiedDate + "<br />";
$("#ImageDate").append(modifiedDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
<br />
<span id="ImageDate"></span>

Related

Add a remove option to Attached file in Contact form 7

In contact form 7 when attach any file to upload there is no option to remove the attached file. How do I add a remove button or cross button beside file name?
<input type="file" name="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<input type="file" name="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
You can use below concept with remove the attached input file
$.fn.fileUploader = function (filesToUpload) {
this.closest(".files").change(function (evt) {
for (var i = 0; i < evt.target.files.length; i++) {
filesToUpload.push(evt.target.files[i]);
};
var output = [];
for (var i = 0, f; f = evt.target.files[i]; i++) {
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";
output.push("<li><strong>", escape(f.name), "</strong> - ",
f.size, " bytes. ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
var filesToUpload = [];
$(document).on("click",".removeFile", function(e){
e.preventDefault();
var fileName = $(this).parent().children("strong").text();
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for(i = 0; i < filesToUpload.length; ++ i){
if(filesToUpload[i].name == fileName){
//console.log("match at: " + i);
// remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
}
}
//console.log(filesToUpload);
// remove the <li> element of the removed file from the page DOM
$(this).closest('div.files').find('input[type="file"]').val('')
$(this).parent().remove();
//document.getElementById("uploadCaptureInputFile").value = "";
});
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});
body {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files1" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row files" id="files2">
<h2>Files 2</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files2" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
</form>
</div>

How to get all files name and size using jquery from <input type=file multiple>

How to get all files name and size using jquery from
My HTML
<input type="file" id="images" multiple="multiple">
<input type="submit" id="send">
My jQuery Code
$('#send').click(function(){
var image1.name = $('#images').files[0].name;
var image1.size = $('#images').files[0].size;
alert(image1.name + ' - ' + image1.size);});
You'd have to iterate over the files property
$('#send').on('click', function() {
var files = $('#images').get(0).files;
$.each(files, function(_, file) {
console.log('name : ' + file.name + ' --- ', 'size : ' + file.size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" id="images" multiple="multiple">
<input type="button" id="send" value="Send">
</form>
use files attribute from the input
$('#send').click(function(){
var files = $('#images')[0].files;
for(var i = 0; i<files.length; i++){
console.log(files[i].name+'----'+files[i].size);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="images" multiple="multiple">
<input type="submit" id="send">
how to accomplish this with multiple file inputs
<input type="file" id="file1" name="file1"><br> <input type="file" id="file2" name="file2">
results:
filename1 - 111bytes
filename2 - 456bytes
Total bytes: 567bytes
Solution: multiple with 1 file input works great. For additional file inputs, simply repeat the code using different var names
now if only you can shorten the code to change number in a var name
example: var i = 0 or 1 or 2
var filename+i = filename1 or filename2 or filename3

Check length of number of files uploaded using JavaScript

I have multiple browse button. I want to show Apply button when I upload file from at least 4 browse button. I can check length of file when I upload file from single browse button. But how can I check files length when I upload files from multiple uploads.
Here is my HTML code:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button>Apply</button>
</span>
Here is my JavaScript code:
var allFiles = document.getElementsByClassName('files');
if (allFiles.length > 4) {
alert('Please select a file!');
} else {
// code to show apply button
}
It's not working well. How can I found the length of total uploaded file?
You can add an event listener to the "change" event of the input elements.
When this event is triggered, you can loop the fileElements and check the number of files using files.length.
You can then keep track of the number of elements that have more than 0 files.
If all elements have an uploaded file, you can enable the button.
For example:
var fileElements = document.getElementsByClassName('files');
for (var i = 0; i < fileElements.length; i++) {
fileElements[i].addEventListener("change", countFiles);
}
function countFiles() {
var elementsWithFiles = 0;
for (var j = 0; j < fileElements.length; j++) {
if (fileElements[j].files.length > 0) {
elementsWithFiles++;
}
}
if (elementsWithFiles > fileElements.length -1) {
document.getElementById("readBytesButtons").style.display = "block";
}
}
.readBytesButtons {
display: none;
}
<form id="" name="">
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<span class="readBytesButtons" id="readBytesButtons">
<button>Apply</button>
</span>
</form>
If you want to check the amount of files inserted you most likely would need to add an event listener to each of the file inputs. Then increasing when an file gets inserted and then check if the required amound is added you would probably end up with something like this:
var insertedFiles = 0;
var allFileElements = document.getElementsByClassName('files');
for (var i = allFileElements.length - 1; i >= 0; i--) {
allFileElements[i].addEventListener("change",check);
};
function update(){
if(this.value == "") {
insertedFiles--;
} else {
insertedFiles++;
}
check();
}
function check(){
if(insertedFiles > 4){
alert("Show button.");
} else {
alert("You need to add more files.");
}
}
fiddle: https://jsfiddle.net/aL0qhoe0/2/

How can I get files by javascript and post send for ajax

I have this form in html for multiple file uploading .
<form class="userform" method="post" action="upload.php" role="form" enctype="multipart/form-data" >
<input name="title" type="text" ><br/>
<input type="file" name="media[]" >
<div class="filesupload">
<input type="file" name="media[]" >
</div>
<script>
$(document).on("click",".add-new-file",function()
{
$('.filesupload').append('<input name="media[]" type="file" >');
});
</script>
</form>
I will get input files by javascript and send to upload.php for uploading. but I don't know how to get files values in javascript.
If you using HTML5
var fileList = document.getElementById("yourInput").files;
for(var i = 0; i < fileList.length; i++) {
//Do something with individual files
}
Using jquery
$("input[name=file1]").change(function() {
var names = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
$("input[name=file]").val(names);
});​

Adding file inputs dynamically with jquery?

To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.
My thought is that when the first input is set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.
Is this possible to to with Jquery?
Edit1: This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:
In the view:
<div id="fileInput0" class="fileVisible">
<input type="file" id="file0" name="files" />
<input type="button" value="Töm" onclick="resetFileField(0)" />
</div>
<div id="fileInput1" class="fileHidden">
<input type="file" id="file1" name="files" />
<input type="button" value="Töm" onclick="resetFileField(1)" />
</div>
<div id="fileInput2" class="fileHidden">
<input type="file" id="file2" name="files" />
<input type="button" value="Töm" onclick="resetFileField(2)" />
</div>
<div id="fileInput3" class="fileHidden">
<input type="file" id="file3" name="files" />
<input type="button" value="Töm" onclick="resetFileField(3)" />
</div>
<div id="fileInput4" class="fileHidden">
<input type="file" id="file4" name="files" />
<input type="button" value="Töm" onclick="resetFileField(4)" />
</div>
<div id="fileInput5" class="fileHidden">
<input type="file" id="file5" name="files" />
<input type="button" value="Töm" onclick="resetFileField(5)" />
</div>
<div id="fileInput6" class="fileHidden">
<input type="file" id="file6" name="files" />
<input type="button" value="Töm" onclick="resetFileField(6)" />
</div>
<div id="fileInput7" class="fileHidden">
<input type="file" id="file7" name="files" />
<input type="button" value="Töm" onclick="resetFileField(7)" />
</div>
<div id="fileInput8" class="fileHidden">
<input type="file" id="file8" name="files" />
<input type="button" value="Töm" onclick="resetFileField(8)" />
</div>
<div id="fileInput9" class="fileHidden">
<input type="file" id="file9" name="files" />
<input type="button" value="Töm" onclick="resetFileField(9)" />
</div>
The Script:
function fileChangeHandler() {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var parentDiv = $(this).parent;
var idNr = $(this).attr('id').replace('file', '');
idNr++;
if($(this).val().length > 0){
for(var i = idNr; i < 10; i++){
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){ return;}
}
else{
$('#fileInput' + i).attr('class' , visibleClass);
return;
}
}
}
}
function resetFileField(id) {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var counter;
$('#fileInput'+id).html($('#fileInput'+id).html());
$('#file'+id).change(fileChangeHandler);
for(var i = 9; i > -1 ;i--)
{
if(id != i)
{
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){
$('#fileInput' + i).attr('class', hiddenClass);
}
}
}
}
}
What is a better solution?
You could have a container div which will harbor the new file input fields and a button to add new inputs:
$('#addFile').click(function() {
// when the add file button is clicked append
// a new <input type="file" name="someName" />
// to a filesContainer div
$('#filesContainer').append(
$('<input/>').attr('type', 'file').attr('name', 'someName')
);
});
Yes, you can just add a file input to the form as you would any other element:
$("#theForm").append("<input type='file' name='foo'>");
I thought this sounded familiar: [jquery]How do I add file uploads dynamically?
Another option, since you are using JQuery is the Bootstrap fileInput. It lets you upload multiple images with one control. You have additional options too like the allowed file types, size, height, width, etc.
<script type="text/javascript">
$("#postedImage").fileinput({
uploadUrl: "/SomeUrl", // you must set this for ajax uploads
maxFileCount: 10,
enctype: "multipart/form-data",
overwriteInitial: false
});
</script>
<input id="postedImage" type="file" class="file" multiple>
Here is a link for other uploaders if you are interested.
if you want to have diffrent input names
var i;
$('#addFile').click(function() {
i=i+1;
$('#filesContainer').append(
$('<input/>').attr('type', 'file').attr('name', 'file'+i)
);
});

Categories

Resources