Question

我在jQuery jTable中以创建模式成功创建了一个上传字段，如下所示：

upload: {
title: 'Upload Image',                                      
input: function (data) {    
return  '<input type="file" name="file">';
'<input type="submit" value="Submit" id="submitBtn" />';
  },
},

我能够成功显示浏览按钮并选择文件。我无法提交表格：

Error: newcourse.php' not found or unable to stat.

与代码所在的文件名相同。

我走到了尽头。文件将在何处上传？在同一个目录中？如何在jTable中做到这一点？可以用ajax完成吗？如果是这样，怎么办？ jTable文档很差。

Answer 1

Hello shels

我花了很多时间来寻找这个问题的解决方案。我读了很多文章，发现这个解决方案很适合我：

actions: {
 listAction: 'modules_data.php?action=list',
 deleteAction: 'modules_data.php?action=delete',

 updateAction: 'modules_data.php?action=update',
 createAction: 'modules_data.php?action=create'
},

...

image_file: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            return '<form target="iframeTarget" class="formUploadFile" action="file_upload.php" method="post" enctype="multipart/form-data"> <input type="file" onchange="this.form.submit()" name="myFile"/> </form> <iframe class="upload-iframe" style="display: none;" src="#" name="iframeTarget"></iframe>';
                        }
                    },

image: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            html = '<input type ="hidden" id="image" name="image" />';
                            return html;
                        }
                    },

...

How to capture submit response in a form created dynamically?

因此您可以使用以下方法捕获提交事件： ...

formSubmitting: function(event, data) {
                    filename = $('input[type=file]').val().split('\\').pop();
                    ($("#" + data.form.attr("id")).find('input[name="image"]').val(filename));
                },

并将数据保存到服务器端脚本。我认为，这是一个很好的解决方案，希望会有所帮助。

最好的问候

Kameliya

Answer 2

我终于在jTable上找到了上传文件的解决方案现在有了jtable 2.4.0的版本（目前最近写的这篇文章）

在你的file.js上添加以下方法：

// Read a page's GET URL variables and return them as an associative array.
function getVars(url)
{
    var formData = new FormData();
    var split;
    $.each(url.split("&"), function(key, value) {
        split = value.split("=");
        formData.append(split[0], decodeURIComponent(split[1].replace(/\+/g, " ")));
    });

    return formData;
}

// Variable to store your files
var files;

$( document ).delegate('#input-image','change', prepareUpload);

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

//The actions for your table:

$('#table-container').jtable({
    actions: {
                listAction:     'backoffice/catalogs/display',
                deleteAction:   'backoffice/catalogs/delete',
                createAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            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) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },
                updateAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            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) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },

// Now for the fields:

    fields: {
                id_catalog: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                thumb_url: {
                    title: 'Image',
                    type: 'file',
                    create: false,
                    edit: true,
                    list: true,
                    display: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';
                    },
                    input: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';

                    },
                    width: "150",
                    listClass: "class-row-center"
                },
                image: {
                    title: 'Select File',
                    list: false,
                    create: true,
                    input: function(data) {
                        html = '<input type ="file" id="input-image" name="userfile" accept="image/*" />';
                        return html;
                    }
                }
           }
});

现在，您可以处理服务器端的文件。

那是所有人。

Answer 3

console.log对FormData不起作用。改用

for (var data of formData) {
    console.log(data);
}

如何在jQuery jTable中上传图像

3 个答案: