Input File to Array JavaScript/Jquery

input file to array javascript/jquery

Edit, Updated

how can i delete a specific item in upload variable?

If expected result is array of file objects would adjust approach to splicing array items from original files object - and sending spliced array as upload - instead of attempting to "delete" items from original files object and still uploading original files object.

---

FileList object does not have .splice() method . Try utilizing .slice() , .call() to convert files to Array , then call .splice() method on array of File objects, e.g.;

// `_files` : `File` object items from original `files` `FileList`
// call `.splice()` on items that would be uploaded ,
// upload `_files` array - _not_ original `files` `FileList` object
// e.g.; `_files`:`File` objects to _keep_ not "delete" from `files`
var idstokeep = [0, 2]; // splice , keep first `2` files 
var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]);

See how does Array.prototype.slice.call() work?

---

Alternatively , utilize

item()

Returns a File object representing the file at the
specified index in the file list.

to return files at specific index within FileList

  var files = e.target.files;
  // return `file` at `index` `1`
  var firstFile = files.item(1);

---

var upload = document.getElementById("file1");
upload.onchange = function(e) {  var files = e.target.files;  // https://developer.mozilla.org/en-US/docs/Web/API/FileList#item  var firstFile = files.item(1);   var idstokeep = [0, 2]; // keep first `2` files from `multiple` selection  var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]);  console.log(files, files.length                       , _files, _files.length              , firstFile);};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>

JQuery: how can I push a file to another input array value?

You can't move the value of one file input to another, it is a security risk.

From copying the value of a form's file input field to another form's input field

---

If the end result you want to achieve is to have identical values for both the file inputs when user select files for input[name="temp[]"], consider using clone and replace instead:

$('input[name="temp[]"]').change(function() {
  var $clone = $this.clone()
  $clone.attr('name', 'files[]');
  $('input[name="files[]"]').replaceWith($clone);
});

Can I use jquery to read array of filenames from input type=file with the multiple attribute?

This can be done without JQuery, check this link.

var x = document.getElementById("name_myfile");

var files = x.files; //contains all files selected

var name = files[0].name; //contains the name of the first file

The files array also contains the size in bytes of every file. To get the filename and no the full path check this one

Code copied from Link and modified to fit the sample:

if (name) {
    var startIndex = (name.indexOf('\\') >= 0 ? name.lastIndexOf('\\') : name.lastIndexOf('/'));
    var filename = name.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}

save input file (more than one file) into array var js,jquery

You may use this to get all modified date values:

function showFileModified(){
    var input = document.getElementById( 'fileSelect' );
    for (var i = 0; i < input.files.length; ++i){
        alert(input.files[i].lastModifiedDate);
    }      
}

input.files is an array with all selected files listed. That's why you need to loop through this array (which is achieved by looping from 0 to array.length - 1)

But you should take care using multiple ids for a single tag as well as you should not use names with special characters:

<input id="fileSelect" type="file" id="file" name="files[]" multiple="multiple" accept="image/*"/>

Better use something like this (you would not even need to use a name:

<input id="fileSelect" type="file" name="fileSelector" multiple="multiple" accept="image/*" />

Upload multiple files in same Array - Jquery

The problem is this line:

<input type="file" name="file-input" id="file-upload"/>.

You have to add multiple so that it can add more than one images.

<input type="file" name="file-input" id="file-upload" multiple/>

Also, for loop looks wrong with the brackets.

 var fileList = [];

 var fileInput = document.getElementById('file-upload');

 fileInput.addEventListener('change', function (event)
 {

 for (var i = 0; i < fileInput.length; i++)
 {
  fileList.push($('#file-upload')[0].files[i]);
 }

  console.log(fileList);

});

Upload files in an array differently in jquery ajax

Use this... Tested (in chrome) and working

$('input:file').on('change', function(){
    allFiles = $(this)[0].files;
    for(var i = 0; allFiles.length > i; i++){
        var eachFile = allFiles[i],
        fileData = new FormData();
        fileData.append('file', eachFile);
        $.ajax({
            url: link,
            type: "POST",
            datatype:'script',
            data: fileData,
            contentType: false,
            processData:false,
            success: function(result){
                console.log(result);
            }
        })
    }
})

---

Related Topics