JQuery AJAX файл загрузки PHP

159

Я хочу осуществить простую загрузку файлов на моей интранет-странице с минимально возможными настройками.

Это моя часть HTML:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

и это мой JS-скрипт JS:

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

В корневом каталоге веб-сайта есть папка с именем «uploads» с правами на изменение для «users» и «IIS_users».

Когда я выбираю файл с формой файла и нажимаю кнопку загрузки, первое предупреждение возвращает «[object FormData]». второе оповещение не вызывается и папка "uploads" тоже пуста !?

Может ли кто-нибудь помочь мне выяснить, что не так?

Также следующим шагом должно быть переименование файла с именем, созданным на стороне сервера. Может быть, кто-то может дать мне решение для этого тоже.

javascript php jquery ajax upload user2355509
источник
Пожалуйста, сначала прочтите это: stackoverflow.com/questions/166221/…
Винсент Деко,
У меня все работает, может это твой PHP код?
Корикулум
с этой формой больше ничего не связано. что ты имеешь ввиду под моим php кодом?
user2355509
Я имею в виду, что ваш код работает, возможно, проблема в коде на стороне сервера.
Корикулум
Получаете ли вы код ошибки 500 при выполнении сценария AJAX? Это указывает на то, что это ошибка на стороне сервера. Также: убедитесь, что во время отладки вы выводите ответ PHP-файла на консоль. Таким образом, если ваш код PHP выдает ошибку, вы знаете, что происходит.
Дидерик

Ответы:

286

Вам нужен скрипт, который запускается на сервере, чтобы переместить файл в каталог загрузки. Метод jQuery ajax(работает в браузере) отправляет данные формы на сервер, а затем скрипт на сервере обрабатывает загрузку. Вот пример использования PHP.

Ваш HTML-код в порядке, но обновите сценарий JS jQuery, чтобы он выглядел следующим образом:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

А теперь для серверного скрипта, использующего PHP в данном случае.

upload.php : скрипт PHP, который запускается на сервере и направляет файл в каталог загрузки:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Кроме того, пара вещей о каталоге назначения:

  1. Убедитесь, что у вас есть правильный путь к серверу , т. Е. Начиная с места расположения скрипта PHP, каков путь к каталогу загрузки, и
  2. Убедитесь, что это доступно для записи .

И немного о функции PHP move_uploaded_file, используемой в скрипте upload.php :

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']имя файла в том виде, в котором оно было загружено. Вам не нужно это использовать. Вы можете дать файлу любое имя (совместимое с файловой системой сервера), которое вы хотите:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

И наконец, помните о ваших значениях конфигурации PHP upload_max_filesizeAND post_max_sizeи убедитесь, что ваши тестовые файлы тоже не превышают. Вот некоторая помощь, как вы проверяете конфигурацию PHP и как вы устанавливаете максимальный размер файла и параметры публикации .

bloodyKnuckles
источник
эй, черт побери! спасибо, я думаю, что это была одна большая вещь, я неправильно понял. Поэтому я добавил файл php, и теперь я немного ближе. Второе предупреждение также выскакивает! но папка все еще пуста.
user2355509
Ах, имя ввода формы "sortpic" в функции заменено на "file" form_data.append. Поэтому я изменил скрипт PHP, чтобы отразить новое имя ввода формы. Я также извлек ответ PHP-скрипта в предупреждение об успешном использовании ajax, чтобы помочь с отладкой.
bloodyKnuckles
1
Приятель, это дает мне ошибку неопределенного индексного файла в$_FILES['file']
Хендри Танака
1
@partho, код prop ('files') [0] обращается к локальному файлу, предназначенному для загрузки на сервер. Если вам нужно больше объяснений, посмотрите в jQuery функции «prop» и «html5 file upload».
bloodyKnuckles
1
Я решил эту проблему. Причиной тому был слишком большой размер файла.
Рон Торнамбе
4 
**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}
Хасиб Камаль
источник
2 
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});
Азхар
источник
0

и это PHP-файл для получения загруженных файлов

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>
kavehmb
источник
Что if (true)делает? Всегда оценивать как истину, поэтому бесполезно, не так ли? Также у вас есть дополнительный конец-кудрявый.
Mr.Web
Я исправил это для тебя. :)
Mr.Web
0

Используйте чистый JS

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)
Развернуть фрагмент

Имя файла автоматически включается в запрос, и сервер может его прочитать, тип контента автоматически устанавливается на «multipart / form-data». Вот более развитый пример с обработкой ошибок и дополнительной отправкой JSON

Показать фрагмент кода

Камил Келчевски
источник
-1

Лучшая загрузка файла с использованием Jquery Ajax с Materialize Нажмите здесь, чтобы скачать

Когда вы выбираете изображение, оно будет конвертировано в базу 64, и вы можете сохранить его в базе данных, чтобы оно также было легким.

Уршит Шет
источник