Question

我正在尝试预览使用jquery上传到我的页面的图像。我在正文页面中放入的默认输入文件可以正常工作并预览图像。

我的HTML代码：

<div class="row">
                <div class="col s12 m3">
                    <div class="card">
                        <div class="card-content">
                            <div class="file-field input-field">
                                <div class="btn"><span>File</span><input type="file" id="file"></div>
                                <div class="file-path-wrapper"><input class="file-path validate" type="text"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

当我在JQuery中添加相同的内容并使用添加的输入文件时，它不会预览图像。

我的JQuery代码：

 $("#responses").append(' <div class="row"><div class="col s12 m3"><div class="card"><div class="card-content"><div class="file-field input-field"><div class="btn"><span>File</span><input type="file" id="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="text"></div></div></div></div></div></div>')

我的Javascript代码（预览文件）

function readURL(input) {

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

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

                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#file").change(function () {
            readURL(this);
        });

Answer 1

更改

reader.onload =

收件人

reader.onloadend =

Answer 2

如果我正确理解了您的问题，那么您正在尝试在aync事件上动态添加一些代码，例如。在某些xhr事件完成后，在这种情况下，您必须将事件重新绑定到新创建的dom元素。

就在您写的地方

 $("#responses").append(' <div class="row"><div class="col s12 m3"><div class="card"><div class="card-content"><div class="file-field input-field"><div class="btn"><span>File</span><input type="file" id="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="text"></div></div></div></div></div></div>')

您需要再次编写以下事件绑定。

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

附加文件输入预览（HTML Jquery）

2 个答案: