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=".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>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./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 ming 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. :
Share Improve this question edited Dec 2, 2016 at 13:52 Amina asked Dec 2, 2016 at 13:21 AminaAmina 7238 silver badges21 bronze badges 6- Is your URL really "URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617" or did you replace the real URL with 'URL' when you posted the question? – Franck Jeannin Commented Dec 2, 2016 at 13:25
- yes i did replace it (I don't have the right to post it ) – Amina Commented Dec 2, 2016 at 13:27
- 1 Your form should have enctype="multipart/form-data". See this question. – alexhughesking Commented Dec 2, 2016 at 13:29
- 2 Error 5XX means the problem is on the server so your client code might not be enough to find a solution. – Franck Jeannin Commented Dec 2, 2016 at 13:29
- I added enctype="multipart/form-data" – Amina Commented Dec 2, 2016 at 13:37
2 Answers
Reset to default 2You need enctype="multipart/form-data" property assigned to your html form.
This the right code, just need to change the URL of the server. Thanks to user1080381, he gave me the solution in ments.
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="https://ajax.googleapis./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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745225526a4617443.html
评论列表（0条）