javascript - Bootstrap InputFile Initial Preview 将图像显示为原始大小

Question

我正在使用 Krajee Bootstrap FileInput。我正在使用 initialPreview 标签并遇到以下问题:

1. 初始图像以原始图像大小而非缩略图大小显示
2. 无法删除初始图像。
3. 我使用了 overwriteInitial 和 autoReplace，但是当我添加新图像时，初始图像仍然存在。我希望它会覆盖初始图像，但它不会

这是我的脚本:

<script>
    $("#file-1").fileinput({
        initialPreview: [
            "<img src='/img/Tulips.jpg' class='file-preview-image' title='Desert'>"
        ],
        uploadUrl: "@Url.Action("upload","Home")", 
        uploadAsync: true,
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFilesNum: 1,
        allowedFileTypes: ['image'],
        overwriteInitial: true,
        autoReplace: true,
        showUpload: true,
        showCaption: true,
        showUploadedThumbs: true,
    });
</script>

Answer 1

也许在 img 标签中设置宽度的大小？

<script>
$("#file-1").fileinput({
    initialPreview: [
        "<img src='/img/Tulips.jpg' class='file-preview-image' title='Desert' width='120' >"
    ],
    uploadUrl: "@Url.Action("upload","Home")", 
    uploadAsync: true,
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    maxFilesNum: 1,
    allowedFileTypes: ['image'],
    overwriteInitial: true,
    autoReplace: true,
    showUpload: true,
    showCaption: true,
    showUploadedThumbs: true,
});