Question

我正在尝试创建一个用于上传图像的表单，并在选择后显示图像的小预览。预览无法显示。

HTML code：

<label for="">Image</label>
<input type="file" class="form-control" name="image" id="img">
<img src="#" id="imgPreview" alt="">

JS代码：

function readURL(input) {
        if(input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $("#imgPreview").attr('src', e.target.result).width(100).height(100);
            }
            reader.readAsDataURL(input.files[0]);
        }
        $("#img").change(function() {
            readURL(this);
        });
    }

Answer 1

您需要在页面init中放置#img的更改事件。

Set "fDir=%UserProfile%\Documents\Stuff\MISCELLANEOUS\ArchiveAurora\Files_Helper"
For /F "Delims==" %%A In ('"(Set fDT[) 2>Nul"') Do Set "%%A="
For %%A In (CDTNEW,CFTNEW) Do For %%B In ("%fDir%\%%A_Now.csv") Do Set "fDT[%%A]=%%~tB"
Set fDT[ 2>Nul & Pause

Answer 2

#img上的更改功能永远不会被调用，因为它位于readURL函数中。你只需要把改变功能放在外面，一切都好。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $("#imgPreview")
                .attr("src", e.target.result)
                .width(100)
                .height(100);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

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

工作演示here

图像预览未显示

2 个答案: