ASP.NET MVC项目使用Cropper.js裁剪上传图片时选中图片名未在文本框显示

你当前代码中的文件选择框在选中图片后不显示文件名，是因为你在input的change事件回调的done方法里，主动执行了input.value = '';清空了文件输入框的值。这行代码的初衷通常是为了避免用户重复选择同一个文件时无法触发change事件，但副作用就是会清空输入框中已选的文件名展示。

你可以根据自己的需求选择以下两种方案：

方案1：保留重复选文件的能力，新增专门的文件名展示区域 #

第一步：修改HTML代码，新增文件名展示标签 #

<div class="col-md-10">
    <img class="rounded" id="avatar" src="~/Files/3456749.jfif" alt="avatar">
    <input type="file" class="form-control" id="input" name="image" accept="image/*" >
    <!-- 新增文件名展示区域 -->
    <span id="fileNameTip" class="text-muted ml-2">未选择任何文件</span>
</div>

第二步：修改JS代码，存储并展示选中的文件名 #

window.addEventListener('DOMContentLoaded', function () {
    var avatar = document.getElementById('avatar');
    var image = document.getElementById('image');
    var input = document.getElementById('input');
    var fileNameTip = document.getElementById('fileNameTip'); // 新增获取文件名展示节点
    var $progress = $('.progress');
    var $progressBar = $('.progress-bar');
    var $alert = $('.alert');
    var $modal = $('#modal');
    var cropper;

    $('[data-toggle="tooltip"]').tooltip();

    input.addEventListener('change', function (e) {
        var files = e.target.files;
        var selectedFileName = ''; // 新增变量存储选中的文件名
        var done = function (url) {
            input.value = '';
            image.src = url;
            $alert.hide();
            $modal.modal('show');
            fileNameTip.innerText = selectedFileName; // 展示选中的文件名
        };
        var reader;
        var file;
        var url;

        if (files && files.length > 0) {
            file = files[0];
            selectedFileName = file.name; // 给文件名变量赋值

            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });

    // 后续原有逻辑保持不变即可
    $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
        });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
    });
    
    document.getElementById('crop').addEventListener('click', function () {
        var initialAvatarURL;
        var canvas;

        $modal.modal('hide');

        if (cropper) {
            canvas = cropper.getCroppedCanvas({
                width: 160,
                height: 160,
            });
            initialAvatarURL = avatar.src;
            avatar.src = canvas.toDataURL();
            $progress.show();
            $alert.removeClass('alert-success alert-warning');
            canvas.toBlob(function (blob) {
                var formData = new FormData();

                formData.append('avatar', blob, 'avatar.jpg');

            });
        }
    });
});

方案2：不需要兼容同文件重复选择场景，直接删除清空输入框的代码 #

直接删除done方法中的input.value = '';这一行即可，原生文件输入框会自动展示选中的文件名。

内容的提问来源于stack exchange，提问作者nischalinn