Salut, am nevoie de ajutor am cautat in tot internetul o solutie la problema mea si nu am gasit.
Am acest modal si acest input, vreau sa incarc poze imediat ce le-am selectat, fara sa dau submit ca mai am un form
<div class="container mt-5">
<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-success btn-lg float-right" data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Upload</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action"save.php">
<div class="form-group">
<label>uname</label>
<input type="text" class="form-control" placeholder="Avatar">
<form id="submitForm">
<div class="form-group">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" name="files[]" multiple id="image" >
</div>
</div>
</form>
<input type="text" class="form-control" placeholder="Name">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Upload</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$("#submitForm").on("change", function(){
$.ajax({
type: 'POST',
url : "uploads.php",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
dataType:'json',
success:function(response){
console.log(response['message']);
console.log('ok');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
});
</script>
Imaginile se incarca daca pun acest form
<form id="submitForm">
<div class="form-group">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" name="files[]" multiple id="image" >
</div>
</div>
</form>
in afara modal-ului, daca pun in modal, nu functioneaza si nu inteleg de ce
