我使用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前端框架。
1条答案
按热度按时间ifmq2ha21#
我想通了。
我最初的猜测是正确的,认为
type="file"
是问题的一部分。显然它不会工作,所以将其更改为type="text"
是解决方案的一部分。另一部分是重新做了一点JavaScript。使用下面的Javascript(输入字段为
type="text"
),它可以工作。字符串