动态生成的FileUpload和图像预览

Question

我使用jquery使用fileupload和默认图像动态生成表行。

我想在使用特定行上的fileupload拾取图像时，图像中的默认无图像应替换为所选图像。

我尝试使用下面的JQuery，但似乎只适用于单个文件上传和图像。

 function readURL(input) {

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

        reader.onload = function (e) {
            $('#img-tag').attr('src', e.target.result);
        }

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

 $("#file").change(function () {
    readURL(this);
});

HTML：

<table id="image" class="list">
                            <thead>
                                <tr>
                                    <td class="left">Image</td>
                                    <td class="right">Sort Order</td>
                                    <td></td>
                                </tr>
                            </thead>

                            <tbody id="image-row">
                                <tr>
                                    <td class="left">
                                        <table>
                                            <tr>
                                                <td>
                                                    <img id="img-tag" src="@ViewBag.ImageLink" alt="no-image" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input id="file" type="file" name="file" />
                                                </td>
                                            </tr>
                                        </table>

                                    </td>
                                    <td class="right">@Html.TextBoxFor(x => x.Image_SortOrder)</td>
                                    <td class="left"></td>
                                </tr>
                            </tbody>


                            <tfoot>
                                <tr>
                                    <td colspan="2"></td>
                                    <td class="left"><a onclick="addimage();" class="button">+</a></td>
                                </tr>
                            </tfoot>
                        </table>

Answer 1

我刚解决了那个

改变：

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

            debugger;
            var img = $(this).closest('tr').prev("tr").find("img");

            readURL(this,img);
        });

并在readUrl函数中添加新参数

function readURL(input,img) {

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

            reader.onload = function (e) {
                debugger;

                img.attr("src", e.target.result)
            }

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