In my laravel 5.6 application I have image upload and preview system with javascript, this is my file,
<form method="POST" action="http://localhost:8000/laravel-crud-image-gallery/create" accept-charset="UTF-8" enctype="multipart/form-data"><input name="_token" type="hidden" value="1LLYc0D1spmVSFMboLDjGM9MR4O5APVwng7giejx">
<div class="form-group row required">
<label for="description" class="col-form-label col-md-3 col-lg-2">Description</label>
<div class="col-md-8">
<input class="form-control" autofocus placeholder="Description" name="description" type="text" id="description">
</div>
</div>
<div class="form-group row">
<label for="image" class="col-form-label col-md-3">Image</label>
<div class="col-md-5">
<img id="preview"
src="http://localhost:8000/images/noimage.png"
height="200px" width="200px"/>
<input class="form-control" style="display:none" name="image" type="file" id="image">
<br/>
<a href="javascript:changeProfile();">Add Image</a> |
<a style="color: red" href="javascript:removeImage()">Remove</a>
<input type="hidden" style="display: none" value="0" name="remove" id="remove">
</div>
</div>
<div class="form-group row">
<div class="col-md-3 col-lg-2"></div>
<div class="col-md-4">
<a href="" class="btn btn-danger">
Back</a>
<button type="submit" class="btn
btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
@endsection
javascripts
<script>
function changeProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgPath = $(this)[0].value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
$('#remove').val(0);
}
}
}
function removeImage() {
$('#preview').attr('src', 'http://localhost:8000/images/noimage.png');
$('#remove').val(1);
}
</script>
but after add @section('content') to my script my image upload preview is not working without @section('content') is is working. how can fix this problem?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire