Question

目前，我正在处理获得图像文件输入的表单。浏览图像然后上传它我会得到图像的ID。这是我的POST代码。

$("#smallpicture_id").change(function () {
    displayAndShowImage(this,'#smallimg','#smallimg'); 
});

$("#largepicture_id").change(function () {
    displayAndShowImage(this,'#largeimg','#largeimg');
});

function displayAndShowImage(input,targetHtmlElementName) {
    if (input.files && input.files[0]) {
        var files = input.files;
        var reader = new FileReader();

        reader.onload = function (e) {
            $(targetHtmlElementName).attr('src', 'images/uploading.gif');
            var formData = new FormData();
            formData.append('userfile',files[0],files[0].name);
            createImage(
                config,
                formData,
                {
                    onSuccess : function(data) {
                        $(targetHtmlElementName).attr('src', e.target.result);
                        $.cookie(input.id, data);
                        console.log("Image has been save - Received ID: " + data + " saved in the cookie " + input.id);
                    },
                    onError : function(jqXHR, status) {
                        $(targetHtmlElementName).attr('src', 'images/img-error.png');
                        console.log("ERROR " + jqXHR.responseText + "\r\nstatus = " + status);
                    }
                }
            );
        }

        reader.readAsDataURL(files[0]);
    }
}

的Ajax

function createImage(cfg,formData,callbacks) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', cfg.url + "/image/", true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            // File(s) uploaded.
            callbacks.onSuccess(xhr.responseText.trim());
        } else {
            callbacks.onError(xhr);
        }
    };

    xhr.send(formData);
}

我的问题是如何使用与图像相同的ID更新/删除我的图像。我已经可以做POST和GET，但我仍然不知道如何更新和删除。

Answer 1

您可以在FormData查询标识符和ID中附加两个字符串（仅在更新和删除的情况下），例如

formData.append('queryType', 'DELETE')
formData.append('imageID', input.id)

在服务器端代码上（你已经添加了用于保存新图像的代码），你必须像这样添加condintion

<?php
$identifier=$_POST['queryType'];
if($identifier=="NEW") {
    //save file with new ID and return ID
} elseif ($identifier=="UPDATE")
    //update Image Data ($_FILE) with ID appended in formdata
} elseif ($identifier=="DELETE")
    //Delete existing image at ID specified
}
?>

希望这可能会有所帮助。

Answer 2

您可以为每个上传进程提供元素特定的类名，这些进程具有相同的id，然后运行displayAndShowImage函数，只有元素具有“update-this”类名。

$("#smallpicture_id").change(function () {

    $(this).addClass("update-this"); // add update-this class
    $(".update-this").not($(this)).removeClass("update-this"); // remove all update-this classnames from all other ones

    // then run your function for only element which has update-this classname
    displayAndShowImage(this,'.update-this'); 
});

如何使用相同的ID但不同的内容进行更新？

2 个答案: