• September 9, 2018


    The HTML

    <!-- IMPORTANT:  FORM's enctype must be "multipart/form-data" -->
    <form method="post" action="upload-page.php" enctype="multipart/form-data">
      <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />

    Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element.  If you’re a stickler for validation, you’ll want to assign the multiple attribute a value of multiple.

    Listing Multiple Files with JavaScript

    //get the input and UL list
    var input = document.getElementById('filesToUpload');
    var list = document.getElementById('fileList');
    //empty list for now...
    while (list.hasChildNodes()) {
    //for every file...
    for (var x = 0; x < input.files.length; x++) {
    	//add to list
    	var li = document.createElement('li');
    	li.innerHTML = 'File ' + (x + 1) + ':  ' + input.files[x].name;

    The input.files property provides an array of files for which you can check the length;  if there’s a length, you can loop through each file and access the file paths and names.

    Receiving and Handling Files with PHP

    if(count($_FILES['uploads']['filesToUpload'])) {
    	foreach ($_FILES['uploads']['filesToUpload'] as $file) {
    		//do your upload stuff here
    		echo $file;

    PHP creates an array of the files uploaded with the given INPUT’s name.  This variable will always be an array within PHP.


ประหยัดเวลากว่า 100 เท่า!

สร้างเว็บไซต์ ดูแลเว็บไซต์