Question

我有几行数据。每行都能够提交与该行相关联的图像。我目前每个行都有一个提交文件按钮。

这是每行生成方式的代码：

<td class='col-lg-1 image-p-col-major image-p pointer no-pad'>
    <label for='files' class='text-center pointer non-bold' style='width:77px;line-height:34px;'>File</label>
    <input type='file' accept='image/jpg, image/jpeg, image/png' id='files' style='display:none;width:77px;'/>
</td>

当用户上传该行的图片时，我试图显示已提交的图片以代替该文件上传按钮。我遇到的问题是，每当我选择文件上传按钮时，我都无法获得特定的元素。它总是返回DOM中的第一个文件上传按钮。

以下是我尝试用特定图片替换按钮的代码：

$("image-p input").change(function(e) {

    console.log($(this)); // This will only ever be the first input button, never the element that was actually clicked

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
            img.src = reader.result;
        }
        reader.readAsDataURL(file);

        // This places the image over the file upload botton - already works
        // The image will always be placed over the first input button, 
        // not the one that was actually clicked
        $(this).parent().parent().children(".image-p").children("input").after(img);
    }
});

可能会有大量需要使用图像的行。 有没有办法找到特定按下的按钮？我希望尽可能不将id与每个按钮相关联。

谢谢

JQuery检测单击了哪个文件上载按钮

0 个答案: