boylesg Posted November 28, 2016 Share Posted November 28, 2016 How do you do this folks? I have been trying to follow some examples but all I seem to get in $_POST is the name of the first selected file. $_FILES is empty. This is my code thus far: <?php header('Content-Type: text/html; charset=utf8'); session_start();?><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>File(s) size</title> <script> function UpdateList() { var fBytes = 0; var InputUploadFiles = document.getElementById("UploadFiles").files; var nFiles = InputUploadFiles.length; var InputFileList = document.getElementById("ListFiles"); var strFilename = ""; var option = null; var fFileSize = 0; var InputLabelTotalBytes = document.getElementById("LabelTotalBytes"); for (var nFileId = 0; nFileId < nFiles; nFileId++) { option = document.createElement("option"); fFileSize = InputUploadFiles[nFileId].size / 1024; option.text = InputUploadFiles[nFileId].name + " (" + fFileSize.toFixed(2) + " kBytes)"; InputFileList.add(option); fBytes += InputUploadFiles[nFileId].size; } fBytes /= 1024; InputLabelTotalBytes.innerHTML = fBytes.toFixed(2); } function UploadFile(file) { var url = 'server/index.php'; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.open("POST", url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // Every thing ok, file uploaded console.log(xhr.responseText); // handle response. } } fd.append("upload_file", file); xhr.send(fd); } function UploadFiles() { var files = this.files; for var nI = 0; nI < files.length; nI++) { UploadFile(this.files[nI]); // call the function to upload the file } } var uploadfiles = document.querySelector('#uploadfiles'); uploadfiles.addEventListener('change', UploadFiles, false); </script> </head> <body onload="updateSize();"> <form name="FileUploadForm" target="upload.php" method="POST"> <p> <input id="UploadFiles" type="file" name="UploadFiles" onchange="UpdateList();" multiple size="10"> </p> <p><select name="ListFiles" id="ListFiles" size="10" style="width: 224px"> <option></option> </select></p> <p><label id="LabelTotalBytes">0</label> kBytes in total to upload...</p> <p><input type="submit" value="Upload files"></p> </form> <?php echo "<pre>"; print_r($_FILES); print_r($_POST); echo "</pre>"; ?> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted November 28, 2016 Share Posted November 28, 2016 First, you need to match the case for the IDs in your element and then the selector in Javascript. For files being uploaded to PHP, in order to populate the $_FILES array the form's enctype needs to be set to "multipart/form-data". Are you selecting files and then pressing the submit button, or trying to upload files individually through ajax? It looks like you're trying to do both. If you're trying to do a normal form submit then you should put brackets on the input name so that it creates an array in PHP: name="UploadFiles[]" Link to comment Share on other sites More sharing options...
boylesg Posted November 29, 2016 Author Share Posted November 29, 2016 First, you need to match the case for the IDs in your element and then the selector in Javascript. For files being uploaded to PHP, in order to populate the $_FILES array the form's enctype needs to be set to "multipart/form-data". Are you selecting files and then pressing the submit button, or trying to upload files individually through ajax? It looks like you're trying to do both. If you're trying to do a normal form submit then you should put brackets on the input name so that it creates an array in PHP: name="UploadFiles[]" It is the first time I have tried this so I have no clear idea of what is ajax and what is normal form submit. Basically I need a fully implemented simple example html file, using either method (form submit example preferred), so I can reverse engineer and understand how it is done. And not have to around with long winded explanations, which is all I have found so far. Don't have such an example or can point me in the direction of one can you? Link to comment Share on other sites More sharing options...
boylesg Posted November 29, 2016 Author Share Posted November 29, 2016 I am following this example: http://blog.teamtreehouse.com/uploading-files-ajax Great! it is fairly simple. However I tried it and the javascript crashes at the indicated line of javascript. This is the problem I am having - none of the authors have a complete working examples. They leave out information that is critical for a newby. Obviously I have to include something in order to get "new FormData()" to work. But what? I have no idea at this point! function OnClick() { alert("000000"); var FormData = new FormData(); alert("000000"); var InputBrowseFiles = document.getElementById("BrowseFiles") var File; var arrayFilenames = fileSelect.files; alert("1111"); // Loop through each of the selected files. for (var nI = 0; nI < files.length; nI++) { File = InputBrowseFiles [nI]; // Check the file type. if (File .type.match("*.htm") || File .type.match("*.txt") || File .type.match("*.php")) { // Add the file to the request. formData.append('contents[]', File, File.name); } else { continue; } } // Set up the request. httpReq = new XMLHttpRequest(); alert("2222"); // Open the connection. httpReq .open('POST', 'upload.php', true); alert("3333"); // Set up a handler for when the request finishes. httpReq .onload = OnReqFinish; alert("4444"); // Send the Data. httpReq .send(formData); alert("5555"); } Link to comment Share on other sites More sharing options...
justsomeguy Posted November 29, 2016 Share Posted November 29, 2016 FormData is native, you don't have to include anything. The problem is that you've used the exact same identifier for the variable name: var FormData = new FormData();That's a problem. In the example on his page he used a lowercase f, and since Javascript is case-sensitive that's a different identifier. There's a simple upload example here, which does not use any Javascript or ajax: http://www.w3schools.com/php/php_file_upload.asp The PHP code for that isn't the best (the error checking isn't complete), but that's a simple example. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now