使用 jquery 上传文件：POST 500（内部服务器错误）答案

【问题标题】：file upload using jquery: POST 500 (Internal Server Error)使用 jquery 上传文件：POST 500（内部服务器错误）
【发布时间】：2016-12-02 13:21:20
【问题描述】：

我正在尝试使用 Jquery 和 POST 方法将图像和一些输入上传到服务器。我试过这段代码但它给我带来了错误： POST 500（内部服务器错误）。有人可以帮我弄清楚代码有什么问题。感谢您的帮助。

<!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>

有了提琴手，我得到了这个输出：

当调试它在这部分停止时，问题似乎来自客户端，因为在服务器中需要图像，它不能为空，这就是他抛出错误的原因。：

【问题讨论】：

您的网址是否真的是“URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617”，或者您在发布问题时是否将真实网址替换为“网址”？
是的，我确实替换了它（我无权发布它）
你的表单应该有 enctype="multipart/form-data"。见this question。
错误 5XX 表示问题出在服务器上，因此您的客户端代码可能不足以找到解决方案。
我添加了 enctype="multipart/form-data"

标签： javascript jquery file-upload http-status-code-500

【解决方案1】：

您需要将enctype="multipart/form-data" 属性分配给您的html 表单。

【讨论】：

感谢您的回复。表单方法="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();" enctype="multipart/form-data" > 但是还是有这个错误，检查后发现这个错误，说明服务器没有收到图片。你认为是什么问题。 SQLSTATE[23000]：完整性约束违规：1048 列“img”不能为空（SQL：插入到menus（img，user_id，restaurant_id，updated_at，created_at）值（，9 , 3, 2016-12-02 13:59:50, 2016-12-02 13:59:50))
您是否正确映射了参数？我的意思是表单输入字段和服务器端参数。提交请求后，输入字段将作为“文件”和“文本”提交。服务端有对应的参数吗？
这是来自服务器的 SQL 错误：Connection.php 第 761 行中的 QueryException：SQLSTATE[23000]：完整性约束违规：1048 列 'img' 不能为空（SQL：插入 menus（ img, user_id, restaurant_id, updated_at, created_at) 值 (, 9, 3, 2016-12-02 14:37:18, 2016-12-02 14:37:18)) ==> 好像服务器没有收到图片
请将您的输入字段重命名为 'img' 和 'name'，因此您的 html 表单应如下所示：<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>
谢谢你，它现在可以工作了，你让我很开心，谢谢你的宝贵帮助！我会发布正确的代码。

【解决方案2】：

这是正确的代码，只需要更改服务器的 URL。感谢user1080381，他给了我cmets中的解决方案。

<!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>

【讨论】：