jquery Laravel 10 JavaScript中的Unishark/Filemanager没有更新输入字段

ajsxfq5m  于 11个月前  发布在  jQuery
关注(0)|答案(1)|浏览(92)

我使用laravel来运行我的应用程序,我使用unisharp/filemanager来上传文件,选择博客文章提交和头像更改等等,它在我的summernote实现中运行得很好,但现在我一直在努力实现它来更新用户的个人资料头像。
我用来打开文件管理器窗口的JavaScript是:

(function( $ ){

    $.fn.filemanager = function(type) {
        this.on('click', function(e) {
            var route_prefix = '/filemanager';
            window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
                var file_path = items.map(function (item) {
                    const image = item.url;
                    return item.url;
                });
        
                $("#preview-container").css("background-image", "url(" + file_path + ")");
                $('#avatar-path').value = file_path;
                $('#file-input').value = file_path;
            };
            return false;
        });
    }
    
})(jQuery);

$('#file-input').filemanager('image');

/* I've also tried the following way to use the filemanager and it had the same results as the previous method
$('#invoke-file-input').filemanager('image'); */

字符串
该JavaScript对应的HTML是:

<div id="preview-container">
</div>
<!-- Custom Styled File Input Button -->
<label for="file-input" id="invoke-file-input" class="btn btn-primary" data-input="file-input" data-preview="preview-container">
    Choose File
</label>
<!-- File Input -->
<input type="file" name="avatar" id="file-input" class="form-control visually-hidden">

<!-- Hidden input fields to store background path a second time -->
<input type="hidden" name="avatar-path" id="avatar-path">


这些CSS都不相关
我隐藏了输入字段,因为我只想要预览框和它下面的一个按钮来上传图像,这部分工作。
我点击伪装成按钮的标签,它会打开文件管理器,上传图像,选择图像,并将其插入预览容器,就像我想要的那样.但我无法像我尝试的那样努力填充输入字段。我不是很擅长JavaScript,所以这里可能有我没有注意到的问题,但公平地说,chatGPT在过去的几个小时里一直在帮助我,但我们没有取得任何进展。
我尝试过清除缓存并重启artisan服务器,但我真的不知道该怎么办,我只需要那个url路径,这样我就可以在其他事情完成后更新数据库,但它不起作用。
控制台不显示任何内容,检查元素时,我看到当我选择一个图像时,它不会将值添加到'file-input'或'avatar-path'(我尝试了第二个隐藏字段,以防它可能工作,但它不工作)。
我有其他隐藏的领域在那里,他们得到更新通过JavaScript刚刚好。
我没有使用react或任何JavaScript前端框架。

ifmq2ha2

ifmq2ha21#

我想通了。
我最初的猜测是正确的,认为type="file"是问题的一部分。显然它不会工作,所以将其更改为type="text"是解决方案的一部分。
另一部分是重新做了一点JavaScript。使用下面的Javascript(输入字段为type="text"),它可以工作。

(function( $ ){

    $.fn.filemanager = function() {
        this.on('click', function(e) {
            window.open('/filemanager?type=image', 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
                items.map(function (item) {
                    $("#preview-container").css("background-image", "url(" + item.url + ")");
                    $('#file-input').val(item.url);
                });
            };
            return false;
        });
    }
    
})(jQuery);

$('#invoke-file-input').filemanager();

字符串

相关问题