I have multiple inputs, I need with one button to upload all files from all the inputs (image and/or video), I found a code on web, but I can't find a way to upload or get all my files.
I am new to this procedure and unable to figure out the problem (maybe the .get() function is not right).
How to get all the files from all the inputs in one button click?..
HTML:
<div id="back" class="back">
<label id="addPicture" onclick="locatePicture(this)"
style="color:white;font-size:larger"
for="theInput">Add Image</label>
<div style="float: left">
<input id="theInput" type='file' />
</div>
<div style="float: right">
<label id="addVideo" for="uploadFileVideo" style="color:white;font-size:larger" class="AjaxList_Button">Add Video</label>
<input id="uploadFileVideo" type='file' />
</div>
</div>
<input type='Button' ID='saveAllElements' value='Done' OnClick='saveMedia()' Text='Done' />
Javascript - code found on web
function saveMedia()
{
var xhr = new XMLHttpRequest();
var data = new FormData();
var files = $(".back").get(0).files;
alert(files.length);
if (files.length == 0)
{
alert("No files");
}
else
{
for (var i = 0; i < files.length; i++)
{
data.append(files[i].name, files[i]);
}
xhr.open("POST", "UploadHandler.ashx");
xhr.send(data);
}
};
Related
Hi I am trying to preview any filename when I upload to any file from local but the filename is looking like this
blob:http://localhost/cf1d307b-83ef-452b-ba7b-53af653378ce
but I want to preview file name like this logo.png or logo.jepg or logo.zip
please help me thanks.
script
function preview_images()
{
var total_file=document.getElementById("images").files.length;
for(var i=0;i<total_file;i++)
{
$('#file_preview').append("<div>"+URL.createObjectURL(event.target.files[i])+"
</div>");
}
}
HTML view
<div class="form-group mb-4">
<label >Upload ArtWork :</label>
<input type="file" class="form-control" id="images" name="images[]"
onchange="preview_images();" multiple/>
div class="row" id="file_preview"></div>
Try the following:
function preview_images()
{
const files = document.getElementById("images").files
const total_files =files.length;
const $preview = $('#file_preview')
$preview.html('')
for(var i=0; i< total_files ;i++)
{
const file = files[i]
const name = file.name
$preview.append(`<p>${name}</p>`);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group mb-4">
<label >Upload ArtWork :</label>
<input type="file" class="form-control" id="images" name="images[]" onchange="preview_images();" multiple />
<div class="row" id="file_preview"></div>
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>
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/
I'm doing a form that after the user upload the file, the checkbox will auto check, so that the user will know that their file had been uploaded.
In the form, there will have few "file upload input" and one "multiple file upload input", each of it will have a checkbox beside that will automatically checked after the file had been uploaded.
here is my code for file upload
<div><input type="checkbox" id="application" value="application" name="application"/><label for="application"><span></span></label>
</div>
<div>
<div>Application Form</div>
<div>
<input id="filename1" type="text"/>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn1" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
</div>
<div><input type="checkbox" id="application2" value="application2" name="application2"/><label for="application2"><span></span></label>
</div>
<div>
<div>Application Form2</div>
<div>
<input id="filename2" type="text"/>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn2" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
</div>
Script
document.getElementById('uploadBtn1').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename1').value = filename;
}
here is the fiddle
http://fiddle.jshell.net/kpxyb74h/
here is the code for multiple file
<div><input type="checkbox" id="payment" value="payment" name="payment" /><label for="payment"><span></span></label>
</div>
<div>
<div>Payment</div>
<div>
<div id="upload_prev"></div>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn" type="file" class="upload" multiple name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
script
$(document).on('click','.close',function(){
$(this).parents('span').remove();
})
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
}
document.getElementById('filename').value = filename;
}
here is the fiddle for multiple file
http://fiddle.jshell.net/37zjr70k/
I have to separate the script because it unable to function at the same time.
$(document).ready(function () {
$("#uploadBtn1").on("change", function () {
$("#application").attr('checked','checked');
});
$("#uploadBtn2").on("change", function () {
$("#application2").attr('checked','checked');
});
});
You can do the same for multiple uploads!
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);
});