Jump to content

Upload some input tags via javascript


Recommended Posts

I try to create an Upload with javascript nad progress bar.

i found this code in the internet, but i can't change the code for my idea.

This is the script sample:


var client = null; function uploadFile(){ //Wieder unser File Objekt var file = document.getElementById("fileA").files[0]; var formData = new FormData(); client = new XMLHttpRequest(); if(!file) return; formData.append("datei", file); client.onerror = function(e) { alert("onError"); }; client.open("POST", "upload.php"); client.send(formData);}


my first problem is, that the autor used ONE input tag an set no MULTIPLE.

I have a multiple input tag. I think it's enoug to change:

var file = document.getElementById("fileA").files[0];


var file1 = document.getElementById("file1").files; //dlete [0] for all files


formData.append("datei", file);


formData.append("file1[]", file);// add [] to create an array


is this correct?

AND MY IMPORTANT PROBLEM is, that i have more input tags:


<input type="file" name="file1">

<input type="file" name="file2">

<input type="file" name="file3">


How can i pass the code for mulitple tags with different names???????

I search since 4 days for an idea. It will be perfect, if i can send all input with ONE clinet.

IT's really important to read the files with $_FILES[file1], $_FILES[file2]

Link to comment
Share on other sites

files is an array, you need to loop through it and perform an action on each one of them.

// Get all the filesvar files = document.getElementById("fileA").files; var file; // Declare this to point to a file input later// Perform an action for each one of themfor(var i = 0; i < files.length; i++) {    file = files[i];    // If there is no file, try with another file    if(!file) {        continue;    }    // Now do something with the file    // ... rest of the code goes here    // Don't forget that all "var" lines must be outside of the loop    // If they need to be inside the loop then    //   put "var X" outside the loop    //   and "X = [something]" inside the loop}
Link to comment
Share on other sites

Thank you very michNow i know how i can put the multiple files in the var file.But i don't know how i use the other input tags. I put the var file in the formdata and send it with the Client.How can i send the other input tags? Can i create more formdata and send all formdata with one client

Link to comment
Share on other sites

You can add form data using the FormData.append() method. Here's a reference: https://developer.mozilla.org/en-US/docs/Web/API/FormData#append%28%29


The variable formData should be outside the loop, the loop will append some fields to it, then you can append more data onto that.

Link to comment
Share on other sites

But i Need diffrent namensMaybe i don't understand formdata. I think i need help again.I want to use $_FILES[input name] after upload.....The formdata have only one filename Parameter:Formdata(filename, file)How can i put the input files with the input Name in the formdata. Maybe i understand this, when i can see a code example.Than for your help



// Edit: i try it with an multiple array,

formData("name", "array");



[0] => array

[0] => inputname e.g. field_1

[1] => array mit filename

[0] => filnema 1

[1] => filname2

[1] => array

[0] => inputname e.g. field_2

[1] => array with filenames from second input type

[0] => filename1

[1] => filename2





If this work, i have only ONE Problem.

i don_t can see the result, because it doesn't change to the php file.... omg, what can I do....


I click on "send" and get only one sentence in the console, but i don't know if there is an fail in the php file, or something more. what can i do to change the site???

i want to get out the POST files eand more.

I think it's reallay difficult to understand my Problem.


with the normall send method, without js submit buttons and action location i changed the site.

than i saw the files with echo and print_ and can create the perfect php file. Now i don't know, what i should wirte in the php file.

Edited by jumbo125
Link to comment
Share on other sites

You're uploading files via ajax, correct? One way to see the output from the PHP script is to use your browser's developer tools to look at the ajax request and check the response from the server. That will show you the headers and everything. Another way is to set your PHP file to use error logging instead of displaying error messages to the browser. You can use these settings in your PHP file to have it write errors to a file called error.log in the same directory as the PHP script:

error_reporting(E_ALL);ini_set('log_errors', 1);ini_set('error_log', __DIR__ . DIRECTORY_SEPARATOR . 'error.log');ini_set('display_errors', 0);ini_set('html_errors', 0);
Now, any error messages from PHP will go that error log file. After that, you can also use the error_log function to write anything else you want to the same error log, e.g.:
error_log('POST data: ' . print_r($_POST, true));
Link to comment
Share on other sites

Thank you for answer. I know how i get upload files via php like:$_FILES [inpuzname]But i Never Try to get files which are uploaded with jsThe other Problem is, that i Write with this file some Database entrys....It will be really nice to See some errorsI will Try the error massage postsSorry for my wr

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...