использование ajax для обработки загрузки файлов

Question

использование ajax для обработки загрузки файлов

Я предпочитаю, чтобы прослушиватели событий были развернуты модульной функцией, а не сценарием прослушивателя событий уровня document. Итак, мне нравится ниже. Обратите внимание: вы не можете переадресовать элемент с одним и тем же прослушивателем событий, поэтому не беспокойтесь о прикреплении слушателя более одного раза - только один палец.

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

1

php ajax

задан dataviews 28 March 2019 в 02:38

4 ответа

Другие вопросы по тегам:

php ajax

Похожие вопросы:

score 0 · Answer 1

Проблема заключала в себе formData() в фигурные скобки {}.

Поскольку formData уже является объектом, я отправлял объект объектов в файл php. Я просто удалил {} из параметра data вызова ajax, и все работает так, как должно.

Это то, что сработало в php:

move_uploaded_file( Проблема заключала в себе formData() в фигурные скобки {}. 
  Поскольку formData уже является объектом, я отправлял объект объектов в файл php. Я просто удалил {} из параметра data вызова ajax, и все работает так, как должно. 
  Это то, что сработало в php: 
 [110]  Надеюсь, это кому-нибудь поможет. Будьте осторожны с обработкой типов данных в любом проекте. 
FILES['file']['tmp_name'], 'C:/xampp/htdoc/tmp/' .  Проблема заключала в себе formData() в фигурные скобки {}. 
  Поскольку formData уже является объектом, я отправлял объект объектов в файл php. Я просто удалил {} из параметра data вызова ajax, и все работает так, как должно. 
  Это то, что сработало в php: 
 [110]  Надеюсь, это кому-нибудь поможет. Будьте осторожны с обработкой типов данных в любом проекте. FILES['file']['name']);

Надеюсь, это кому-нибудь поможет. Будьте осторожны с обработкой типов данных в любом проекте.

score 0 · Answer 2

Почему бы не использовать FormData для обработки данных, прежде чем использовать их в своем запросе ajax? Вот ссылка: ССЫЛКА

Надеюсь, это поможет

score 0 · Answer 3

Имя вашего файлового поля - userfile, а в бэкэнде php вы вызываете файловое поле, поэтому вы получаете сообщение об ошибке. Измените свой бэкэнд на

move_uploaded_file(

Имя вашего файлового поля - userfile, а в бэкэнде php вы вызываете файловое поле, поэтому вы получаете сообщение об ошибке. Измените свой бэкэнд на

  [110] 
  Он будет работать на вашем Ajax, и все работает нормально. 
FILES['userfile']['tmp_name']

Он будет работать на вашем Ajax, и все работает нормально.

score 0 · Answer 4

Я думаю, что ваша проблема заключается в следующем:

data: {test_form},

, чтобы проверить, получаете ли вы какой-либо файл на стороне сервера, распечатайте вывод переменной файла:

echo var_dump( Я думаю, что ваша проблема заключается в следующем: 
 [110] , чтобы проверить, получаете ли вы какой-либо файл на стороне сервера, распечатайте вывод переменной файла: 
 [111]  и запишите вашего результата. 
   Но:  
  у меня есть другой скрипт для обработки всех элементов формы: 
 function ToAjax(form) { //target form
    var jsonObj = [];
    var formData = new FormData();
    //Form element
    $('[name="' + form + '"] *').not(':input[type=file], :input[type=button], :input[type=submit], :input[type=reset], :input[type=checkbox]:not(:checked)').filter(':input').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("name");
        if (typeof inputname !== typeof undefined && inputname !== false) { //handle attribute names
            inputname = inputname.replace(/-/g, '_'); //handle underscore
            var val = input.val();
            var inputval = val;
            iObj[inputname] = inputval;
            jsonObj.push(iObj);
        }
    });
    //Summernote textarea editor
    $('[name="' + form + '"] *').filter('div.sumertextarea').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("data-name");
        inputname = inputname.replace(/-/g, '_');
        var val = input.summernote('code');
        var inputval = val;
        iObj[inputname] = inputval;
        jsonObj.push(iObj);
    });
    //compres in json data
    jsonData = JSON.stringify(jsonObj);
    //parse json to formdata
    formData.append('jsonData', jsonData);
    //handle all file types input
    $('[name="' + form + '"] *').filter(':input[type=file]').each(function(obj, v) {
        if (typeof v.files[0] != 'undefined') {
            var file = v.files[0];
            var name = $(v).attr("name");
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //handle all File type from dropzone plugin
    $('[name="' + form + '"] *').filter('div.dropzone').each(function() {
        var DropFile = $(this)[0].dropzone.getAcceptedFiles();
        for (Nof in DropFile) {
            var file = DropFile[Nof];
            var name = DropFile[Nof].name;
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //send all data packet to send ajax function.
    window.SendAjax(formData);
}
  для отправки на серверную часть я использую это: 
 function SendAjax(formdata) {
    var url = 'index.php';
    $.ajax({
        url: url,
        data: formdata,
        contentType: false,
        processData: false,
        type: 'POST',
        cache: false,
        error: function(xhr, status, error) {
            console.log(error);
            alert(error);
        },
        success: function(resp) {
            console.log(resp);
            alert(resp);
        }
    });
}
  и да, я использую contenType: false вместо contentType: 'multipart/form-data', 
 , потому что я могу более легко обрабатывать данные на стороне сервера, чтобы получить доступ к файлам, которые у вас есть 2 seccion file sistema или dropzone plugin проверьте разницу в массиве результатов и позаботьтесь об адаптации или используйте ее в своем проекте: 
  2 примера файла отправляют одновременно PDF и JPG этот выходной тест плагина $ _FILES для общей формы и плагина: 
 [ 114]  С плагином dropzone: 
 ["test_jpg"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC7.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(8984)
  }
  ["test_pdf"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.pdf"
    ["type"]=>
    string(15) "application/pdf"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC8.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(180572)
  }
FILES);

и запишите вашего результата.

Но:

у меня есть другой скрипт для обработки всех элементов формы:

function ToAjax(form) { //target form
    var jsonObj = [];
    var formData = new FormData();
    //Form element
    $('[name="' + form + '"] *').not(':input[type=file], :input[type=button], :input[type=submit], :input[type=reset], :input[type=checkbox]:not(:checked)').filter(':input').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("name");
        if (typeof inputname !== typeof undefined && inputname !== false) { //handle attribute names
            inputname = inputname.replace(/-/g, '_'); //handle underscore
            var val = input.val();
            var inputval = val;
            iObj[inputname] = inputval;
            jsonObj.push(iObj);
        }
    });
    //Summernote textarea editor
    $('[name="' + form + '"] *').filter('div.sumertextarea').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("data-name");
        inputname = inputname.replace(/-/g, '_');
        var val = input.summernote('code');
        var inputval = val;
        iObj[inputname] = inputval;
        jsonObj.push(iObj);
    });
    //compres in json data
    jsonData = JSON.stringify(jsonObj);
    //parse json to formdata
    formData.append('jsonData', jsonData);
    //handle all file types input
    $('[name="' + form + '"] *').filter(':input[type=file]').each(function(obj, v) {
        if (typeof v.files[0] != 'undefined') {
            var file = v.files[0];
            var name = $(v).attr("name");
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //handle all File type from dropzone plugin
    $('[name="' + form + '"] *').filter('div.dropzone').each(function() {
        var DropFile = $(this)[0].dropzone.getAcceptedFiles();
        for (Nof in DropFile) {
            var file = DropFile[Nof];
            var name = DropFile[Nof].name;
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //send all data packet to send ajax function.
    window.SendAjax(formData);
}

для отправки на серверную часть я использую это:

function SendAjax(formdata) {
    var url = 'index.php';
    $.ajax({
        url: url,
        data: formdata,
        contentType: false,
        processData: false,
        type: 'POST',
        cache: false,
        error: function(xhr, status, error) {
            console.log(error);
            alert(error);
        },
        success: function(resp) {
            console.log(resp);
            alert(resp);
        }
    });
}

и да, я использую contenType: false вместо contentType: 'multipart/form-data',

, потому что я могу более легко обрабатывать данные на стороне сервера, чтобы получить доступ к файлам, которые у вас есть 2 seccion file sistema или dropzone plugin проверьте разницу в массиве результатов и позаботьтесь об адаптации или используйте ее в своем проекте:

2 примера файла отправляют одновременно PDF и JPG этот выходной тест плагина $ _FILES для общей формы и плагина:

[ 114]

С плагином dropzone:

["test_jpg"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC7.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(8984)
  }
  ["test_pdf"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.pdf"
    ["type"]=>
    string(15) "application/pdf"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC8.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(180572)
  }