JQuery, HTML5 Uploader - 上传后获取数据响应答案

【问题标题】：JQuery, HTML5 Uploader - get data response after uploadJQuery, HTML5 Uploader - 上传后获取数据响应
【发布时间】：2014-03-14 09:37:35
【问题描述】：

上传图片后如何获取数据响应并将该响应插入到 a 标签 作为 data-id 属性（成功发布后我得到插入图片的 id）。函数中的什么地方发生了这种情况？功能：

function img_upload(url) {
    {
        var fileTemplate = "<div id=\"{{id}}\">";
        fileTemplate += "<div class=\"preview\"></div>";
        fileTemplate += "<div class=\"filename\">{{filename}}</div>";
        fileTemplate += "<a href=\"<?php echo base_url() ?>admin/galerija_slika_delete/tmp\"  class=\"image_delete\">Obriši Sliku</a>";
        fileTemplate += "</div>";

        function slugify(text) {
            text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
            text = text.replace(/-/gi, "_");
            text = text.replace(/\s/gi, "-");
            return text;
        }
        $("#dropbox").html5Uploader({
            postUrl: url,
            onClientLoadStart: function (e, file, data) {
                var upload = $("#upload");
                if (upload.is(":hidden")) {
                    upload.show();
                }
                upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name));
                console.log(data);
            },
            onClientLoad: function (e, file) {
                $("#" + slugify(file.name))
                    .find(".preview")
                    .append("<img class=img_upload title=\"" + file.name + "\" src=\"" + e.target.result + "\" alt=\"\">")
                    .on('click', function () {
                    img_name = $(this).find('.img_upload').attr('title'),
                    url = '<?php echo base_url() ?>admin/galerija_naslovna_slika/' + img_name.replace(/\s/g, "_") + '/' + id;
                    $.post(url);
                });
                var img_delete = $('.image_delete');

                    delete_image(img_delete);
            },
            onServerLoad: function (e, file) {

            }
        });
    }
}

【问题讨论】：

我猜这取决于您的服务器。你用什么？
我在服务器端使用 PHP 5.3。上传工作没有问题，但我需要一些额外的功能 - 添加上传图像的 id，以便用户可以在需要时删除图像。

标签： javascript jquery jquery-html5uploader

【解决方案1】：

我知道这是旧的，但我所做的是将 id 传递到 postURL。

类似：/image_upload/212/

您需要使用 apache 的 mod_rewrite 才能访问您的 php 文件。然后你可以简单地查看请求路径来获取 ID。

或者另一种方法是将 ID 作为 POST var 传递。您可以使用 id 作为值的隐藏“输入”。

docid = $('#docid').val();

$.ajax({
url: '/upload.php',
type: "POST",
data: {'docid': docid},
    success: function(data, status, jqXHR) {
        set_status('info', 'Success!');
    },
    error: function(jqXHR, status, err) {
        set_status('danger', 'Error: ' + err + ' - ' + status);
    },
    complete: function(jqXHR, status) {

    }
});

【讨论】：