file upload using jquery: POST 500 (Internal Server Error)
Question
I'm trying to upload image and some input into a server, using Jquery, with POST method. I tried this code But it's throwing me error : POST 500 (Internal Server Error). Can someone help me to figure out what is wrong with the code. Thank you for helping.
<!DOCTYPE html> <html> <head> <title>Image Upload Form</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> function submitForm() { console.log("submit event"); var fd = new FormData(document.getElementById("fileinfo")); fd.append("label", "WEBUPLOAD"); $.ajax({ url: "http://URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done(function( data ) { console.log("PHP Output:"); console.log( data ); }); return false; } </script> </head> <body> <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();"> <label>Select a file:</label><br> <input type="file" name="file" required /> <input type="text" name="text" required /> <input type="submit" value="Upload" /> </form> <div id="output"></div> </body> </html>
With the fidder i had this output :
When debuging it stops in this part it seems that the problem is comming from the client, because in the serveur the image is required, it has not to be null so that's why he is throwing an error. :
2 answers
solution1
2 ACCPTED 2016-12-02 13:58:10
您需要将enctype="multipart/form-data"属性分配给您的html表单。
solution2
2 2016-12-02 18:27:06
This the right code, just need to change the URL of the server. Thanks to user1080381, he gave me the solution in comments.
<!DOCTYPE html> <html> <head> <title>Image Upload Form</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> function submitForm() { console.log("submit event"); var fd = new FormData(document.getElementById("fileinfo")); console.log(fd); //fd.append("label", "WEBUPLOAD"); console.log(fd); $.ajax({ url: "http://TypeYourURL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done(function( data ) { console.log("PHP Output:"); console.log( data ); }); return false; } </script> </head> <body> <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();" enctype="multipart/form-data"> <label>Select a file:</label><br> <input type="file" name="img" required /> <input type="text" name="name" required /> <input type="submit" value="Upload" /> </form> <div id="output"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.