CODEWITHSUNDEEP
javascriptjqueryhtml
fidel
fidel

Reputation: 89

uploading multiple images using the same button

i would like to know if its possible to upload multiple images using the same input. im having trouble uploading images i can only upload one and display it. and also would it be possible to make the background transparent

// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}

// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
    
    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
    $(image).appendTo('#images');
    
    // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};

$('#go').click(function() {

    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           

});
<input type="file" multiple="true" id="files" />
<button id="go" data-bind="click: addNew">Create</button>
<div id="images"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
 <link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

Upvotes: 0

Views: 1004

Answers (2)

guest271314
guest271314

Reputation: 1

You can use .item() method of FileList object to pass File object at index i to readFile(); set i to 0 at each click on #go

// set up variables
var reader = new FileReader(),
  i = 0,
  numFiles = 0,
  imageFiles;

// use the FileReader to read image i
// pass `File` at index `i` within `FileList` to `readFile`
function readFile(file) {
  reader.readAsDataURL(file)
}

// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
  // increment `i`
  ++i;
  // make an image and append it to the div
  var image = $('<img>').attr('src', e.target.result);
  $(image).appendTo('#images');

  // if there are more files run the file reader again
  if (i < numFiles) {
    // pass `File` at index `i` within `FileList` to `readFile`
    readFile(imageFiles.item(i));
  } 
};

$('#go').click(function() {
  i = 0;
  imageFiles = document.getElementById('files').files
    // get the number of files
  numFiles = imageFiles.length;
  // pass first `File` to `readFile`
  readFile(imageFiles.item(i)); 

});
<input type="file" multiple="true" id="files" />
<button id="go" data-bind="click: addNew">Create</button>
<div id="images"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

Upvotes: 1

A Macdonald
A Macdonald

Reputation: 824

To enable multiple selections give the file input a name and make that name an array name="files[]" try:

<input name="files[]" type="file" multiple id="files" />

Upvotes: 0

Related Questions