asp.net-mvc - 上传文件预览图标消失后，Krajee 输入的引导文件

Question

上传文件后文件预览消失。该过程上传到不在托管站点的服务器上的位置。上传文件的链接在上传后不可用，但我们使用的是图标而不是文件的预览。

规格：ASPNET MVC C#、Razor 页面、目标框架 4.6.1、

HTML 标记

<div class="row">
    <div class="col">
        <label>Uploader configured via JS </label>
        <div class="file-loading">
            <input id="input-js" name="input-js[]" type="file" multiple>
        </div>

    </div>
</div>

JS 和文件输入配置

 $('#input-js').fileinput({
            showUpload: true,

            previewFileType: 'image',
            dropZoneEnabled: true,
            browseOnZoneClick: true,
            uploadAsync: true,
            theme: 'fas',
            uploadUrl: "/Home/FileUpload",
            deleteUrl: "/Home/FileDelete",
            maxFileCount: 3, 
            maxFileSize: 240, 
            maxFilePreviewSize: 10240, 
            initialPreviewAsData: true,
            overwriteInitial: false,
            preferIconicPreview: true, 
            previewFileIconSettings: { 
                // configure your icon file extensions
                'doc': '<i class="fas fa-file-word text-primary"></i>',
                'xls': '<i class="fas fa-file-excel text-success"></i>',
                'ppt': '<i class="fas fa-file-powerpoint text-danger"></i>',
                'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
                'zip': '<i class="fas fa-file-archive text-muted"></i>',
                'htm': '<i class="fas fa-file-code text-info"></i>',
                'txt': '<i class="fas fa-file-alt text-info"></i>',
                'mov': '<i class="fas fa-file-video text-warning"></i>',
                'mp3': '<i class="fas fa-file-audio text-warning"></i>',
                // note for these file types below no extension determination logic
                // has been configured (the keys itself will be used as extensions)
                'jpg': '<i class="fas fa-file-image text-danger"></i>',
                'gif': '<i class="fas fa-file-image text-muted"></i>',
                'png': '<i class="fas fa-file-image text-primary"></i>'
            },
            previewFileExtSettings: { // configure the logic for determining icon file extensions
                'doc': function (ext) {
                    return ext.match(/(doc|docx)$/i);
                },
                'xls': function (ext) {
                    return ext.match(/(xls|xlsx)$/i);
                },
                'ppt': function (ext) {
                    return ext.match(/(ppt|pptx)$/i);
                },
                'zip': function (ext) {
                    return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
                },
                'htm': function (ext) {
                    return ext.match(/(htm|html)$/i);
                },
                'txt': function (ext) {
                    return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
                },
                'mov': function (ext) {
                    return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
                },
                'mp3': function (ext) {
                    return ext.match(/(mp3|wav)$/i);
                }
            }
        });

从上传返回的 Json

initialPreview: "/Content/greencheckmark.jpg"
initialPreviewAsData: true
initialPreviewConfig: Array(1)
0:
key: "a9483866-251c-4be2-aa49-6f0b5088434d"
caption: "Gas Heating.pdf"
size: 183294
fileId: "a9483866-251c-4be2-aa49-6f0b5088434d"
url: "/Home/FileDelete"
extra:
fileName: "Gas Heating.pdf"
spId: "a9483866-251c-4be2-aa49-6f0b5088434d"
__proto__: Object
type: "pdf"
filetype: "application/pdf"

JSON 响应是按文档构建的，每个文档的“initialPreviewConfig”不同，但数组中始终只有一个值。'initialPreview' 和 'initialPreviewAsData' 对于所有文档都是相同的。

上传单个文件时，预览中不会显示任何内容。上传3个文件时；2 正确返回一个返回一个没有信息视图快照的预览。

我不知道哪里出了问题或行为不一致的原因。

预先感谢您协助解决此问题。

标签： asp.net-mvcbootstrap-file-input