问题-无法提交表单，无法读取上传的图像

Question

我正面临表单的问题，我无法提交更改，提交按钮没有反映任何更改，我正在上传表单中的图像，并试图使用js显示它，但它没有返回图像。

<form method="POST" action="{{ route('store.portfolio') }}" enctype="multipart/form-data">
@csrf

<div class="row mb-3 mt-3">
<label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Name</label>
<div class="col-sm-10">
<input class="form-control" name="portfolio_name" id="portfolio_name"type="text" value="">
@error('portfolio_name')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<!-- end row -->
<div class="row mb-3 mt-3">
<label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Title</label>
<div class="col-sm-10">
<input class="form-control" name="portfolio_title" id="portfolio_title"type="text" value="">
</div>
</div>
<!-- end row -->
<div class="row mb-3 mt-3">
<label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Description</label>
<div class="col-sm-10">
<form method="post">
<textarea id="elm1" name="area">
</textarea>
</form>
</div>
</div>
<!-- end row -->

<div class="row mb-3">
<label for="example-number-input" class="col-sm-2 col-form-label">Portfolio Image</label>
<div class="col-sm-10">
<input class="form-control" type="file" name="portfolio_image" id="image">
</div>
</div>
<!-- end row -->
<div class="row mb-3">
<label for="example-number-input" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<img id="showimage" class="rounded-circle avatar-xl" src="{{ url('uploads/no_image.jpg') }}">
</div>
</div>
<!-- end row -->
<input id="submit" type="submit" class="btn btn-secondary btn-rounded waves-effect waves-light" value="Update Portfolio Page">
</form>
</div>
</div>
</div> <!-- end col -->
</div>

</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#portfolio_image').change(function(e){
var reader = new FileReader();
reader.onload = function(e){
$('#showimage').attr('src',e.target.result);
}
reader.readAsDataURL(e.target.files['0']);
});
});
</script>

当我从本地系统中选择任何图像时，它应该反映在图像选择器

的下方(https://i.stack.imgur.com/LrGit.png)

我正在创建管理面板，以便它反映前端的变化，但它不工作。相同的代码，我尝试了不同的页面，它的工作。我不知道我在这里错过了什么。有人能帮忙调查一下吗谢谢你

Answer 1

你可以通过Load file change直接渲染。

<input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile (event)" >
<img id="output" width="200" />

var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};

Answer 2

// portfolio_image is a name. given id is image
$('#portfolio_image').change(function(e){
$('#image').change(function(e) {
alert("hii")
}