Question

我现在已经做了很多工作。我有一个动态表，我使用按钮添加更多列。在其中一个专栏中，我希望创建一个图像上传按钮我使用javascript将列添加到我的表中，并在其中一列中添加以下形式

 tblBody.rows[row].cells[6].innerHTML = ' <form enctype="multipart/form-data" method="post">
                                          <input type="file" name="file_upload" id="file_upload">
                                          <input class="button green" type="submit" name="submit" value="Submit Content">
                                          </form>';

为了使用AJAX和jQuery上传图像，我在github上使用了以下代码所以我将以下javascript包含在我的代码中

$(function()
{
// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);

// Grab the files and set them to our variable
function prepareUpload(event)
{
    files = event.target.files;
}

// Catch the form submit and upload the files
function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault(); 


    var data = new FormData();
    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                submitForm(event, data);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
            // STOP LOADING SPINNER
        }
    });
}

function submitForm(event, data)
{
    // Create a jQuery object from the form
    $form = $(event.target);

    // Serialize the form data
    var formData = $form.serialize();

    // You should sterilise the file names
    $.each(data.files, function(key, value)
    {
        formData = formData + '&filenames[]=' + value;
    });

    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                console.log('SUCCESS: ' + data.success);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
        },
        complete: function()
        {
            // STOP LOADING SPINNER
        }
    });
}
});

但是由于某种原因，当我使用javascript包含表单时，这不起作用。当表单在普通的html文件中时，它工作正常有没有人知道它为什么不起作用？

AJAX上传无法使用.innerHTML

0 个答案: