Develop Reference

bootstrap notify ajax succes response

<script>
$(document).ready(function(){
$(document).on('change', '#avatar', function(){
var property = document.getElementById("avatar").files[0];
var form_data = new FormData();
form_data.append("avatar", property);
$.ajaxSetup({
beforeSend: function(xhr, type) {
if (!type.crossDomain) {
xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
}
},
});
$.ajax({
url: '{{ url('app()->getLocale())/profile') }}',
method: "POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success:function(response){
window.location.href = window.location.href;
$.notify({
message: 'Hello World'
},{
// settings
type: 'danger'
});
}
})
});
});
</script>
How can I do this so that when the image is finished uploading and the image is refreshed to display a message using $ .notify? I tried everything I found on the internet, but to no available...

how to append multiple files input on formdata

I have to send multiple files using form data but my code is not working can anybody tell me where it is wrong.
$('#fileupload').on('change', function() {
var to_user_id = $(this).data('touserid');
var chat_id = $(this).data('chat_id');
var formData = new FormData();
$.each($('input[type=file]')[0].files, function(i, value) {
formData.append('file[' + i + ']', value.files[0]);
});
//console.log(formData);
formData.append('to_user_id', to_user_id);
formData.append('chat_id', chat_id);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
cache: false,
success: function(data) {
//console.log(data);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php">
<input type="file" name="fileupload[]" id="fileupload" multiple data-touserid="'+to_user_id+'" data-chat_id="'+getdata+'">
</form>

You have to pass the value in the form data
$.each($('input[type=file]')[0].files, function(i, value){
formData.append('file['+i+']', value); // change this to value
});
sample code which I used
$.each($('#upload_screenshot')[0].files,function(key,input){
formData.append('upload_screenshot[]', input);
});

Please implement below script code.
$('#fileupload').on('change', function(){
var to_user_id = $(this).data('touserid');
var chat_id = $(this).data('chat_id');
var form_data = new FormData();
var ins = document.getElementById('fileupload').files.length;
for (var x = 0; x < ins; x++) {
form_data.append("documentfiles[]", document.getElementById('fileupload').files[x]);
}
if(ins > 0)
{
formData.append('to_user_id', to_user_id);
formData.append('chat_id', chat_id);
$.ajax({
url: 'upload.php',,
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response) {
},
});
}
else
{
alert("Please choose the file");
}
});
I hope your problem will be resolved.

Ajax: send mulit images

I use laravel and I want to upload gallery and I want to use ajax.
I created this code
$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
method: "POST",
url: "{{ route('upload.store')}}",
mimeType: "multipart/form-data",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: formData,
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});
This is ma the latest code. Could you help me?

$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData($("#hello")[0]);
$.ajax({
url: "{{ route('upload.store')}}",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});

How to add PHP Session variable into FormData using AJAX?

I'd like to pass a PHP session variable (called 'profileid') using FormData and AJAX. I thought this below would work, it did not. Why?
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
imageData.append('profileid', <?php echo $_SESSION['profileid'];?>);
//Make ajax call here:
$.ajax({
url: '/upload-image-results-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
//leaving out the rest as it doesn't pertain

You could add the profileid in the $.ajax URL parameter instead of adding it in FormData:
$(document).ready(function (e) {
$('#uploadImageForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "/upload-image-results-ajax.php?profileid=<?= $_SESSION['profileid']; ?>",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response){
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}));
$('#uploadImage').on("change", function() {
$("#uploadImageForm").submit();
});
});
Don't forget to place session_start(); at the beginning of your code.

How to send String data with formdata in ajax

<script type="text/javascript">
$(document).ready(function(){
$("#btnUpdate").click(function(){
alert($("#frm_data").serialize());
var formData = new FormData($("#frm_data")[0]);
var Desc= CKEDITOR.instances.editor1.getData();
$("#btnUpdate").attr('value', 'Please Wait...');
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
{
$("#btnUpdate").attr('value', 'Update');
}
});
return false;
});
})
</script>
i use ckeditor for textarea field. but its can update value with new value, so i want to use another way with send textarea value with form data.
so how to send Desc data with fromData. in ajax.

To achieve this you can use the append() method of FormData to add whatever additional information you require:
$("#btnUpdate").click(function(e) {
e.preventDefault();
var $btn = $(this).attr('value', 'Please Wait...');
var formData = new FormData($("#frm_data")[0]);
formData.append('desc', CKEDITOR.instances.editor1.getData());
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function(response) {
$btn.attr('value', 'Update');
}
});
});