загрузка файла с помощью jquery: POST 500 (внутренняя ошибка сервера)

Я пытаюсь загрузить изображение и некоторый ввод на сервер, используя 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>

С фиддером у меня был такой вывод: введите здесь описание изображения

При отладке он останавливается в этой части, кажется, что проблема исходит от клиента, потому что на сервере требуется изображение, оно не должно быть нулевым, поэтому он выдает ошибку. : введите здесь описание изображения


javascript jquery file-upload http-status-code-500
person Amina    schedule 02.12.2016    source источник
comment
Является ли ваш URL действительно URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617 или вы заменили настоящий URL, когда публиковали URL вопрос?   -  person Franck Jeannin    schedule 02.12.2016
comment
да, я заменил его (я не имею права размещать его)   -  person Amina    schedule 02.12.2016
comment
Ваша форма должна иметь enctype=multipart/form-data. См. этот вопрос.   -  person Alex K    schedule 02.12.2016
comment
Ошибка 5XX означает, что проблема на сервере, поэтому вашего клиентского кода может быть недостаточно для поиска решения.   -  person Franck Jeannin    schedule 02.12.2016
comment
Я добавил enctype=multipart/form-data   -  person Amina    schedule 02.12.2016
comment
FrankJeannin, а как убедиться, что мой код правильный?   -  person Amina    schedule 02.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно enctype="multipart/form-data" свойство, назначенное вашей html-форме.

person user1080381    schedule 02.12.2016
comment
Спасибо за ответ. метод формы=идентификатор сообщения=информация о файле имя=информация о файле 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)) - person Amina; 02.12.2016
comment
Вы правильно сопоставляете параметры? Я имею в виду поля ввода формы и серверные параметры. После отправки запроса поля ввода будут представлены как «файл» и «текст». У вас есть соответствующие параметры на стороне сервера? - person user1080381; 02.12.2016
comment
Это ошибка SQL с сервера: QueryException в строке Connection.php 761: SQLSTATE [23000]: нарушение ограничения целостности: 1048 Столбец img не может быть нулевым (SQL: вставить в menus (img, user_id, restaurant_id, updated_at, created_at) values ​​(, 9, 3, 2016-12-02 14:37:18, 2016-12-02 14:37:18)) ==› Кажется, сервер не получает изображение - person Amina; 02.12.2016
comment
Пожалуйста, переименуйте поля ввода в 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> - person user1080381; 02.12.2016
comment
Спасибо, теперь это работает, вы сделали мой день, спасибо за вашу бесценную помощь! Я опубликую правильный код. - person Amina; 02.12.2016

arrow_upward
2
arrow_downward

Это правильный код, просто нужно изменить URL-адрес сервера. Спасибо пользователю 1080381, он дал мне решение в комментариях.

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

person Amina    schedule 02.12.2016