how to append serialize with formdata in ajax - javascript

I am tring to append serilize with formdata.It is not working.My controller as two viewmodel with httppostfilesbase as a parameter.i want to append both serilize collection with formdata and i went to send all data including file to controller.it is not working for me.can any one help on this please`
var fileData = new FormData();
if (window.FormData !== undefined) {
var fileUpload = $("#myFile").get(0);
var files = fileUpload.files;
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
}
}
var other_data = $('form').serializeArray();
fileData.append('file',other_data );
debugger
$.ajax({
type: "POST",
url: '#Url.Action("Save", "Settlement")',
data: fileData[0],
contentType: false,
processData: false,
success: function (result) {
if (result.redirectTo) {
} else {
$("#childcontent").html(result);
}
}
})
}
}

There is no need of fileData[0]. Change url to url: '/Settlement/Save',
Also check the console for any errors and revert if you need more information
Can you try with this?
$.ajax({
type: "POST",
url: '/Settlement/Save',
contentType: false,
processData: false,
data: fileData,
success: function(result) {
if (result.redirectTo) {
} else {
$("#childcontent").html(result);
}
},
});

Related

Send FormData and string using one function

I want to send data from the form (file from input and string from input) using ajax to ASP.NET Function. If I send only files i use:
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: {files: formData },
processData: false,
contentType: false,
});
}
If I want to send an only string, I use:
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: { test: test},
dataType: "json",
});
}
It is possible to send string and FormData using one Ajax? I try something like this:
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: {files: formData, test: test },
processData: false,
contentType: false,
});
but now the string parameter is not sending (is null).
Additional - My Controller code
public async Task<IActionResult> UploadFiles(string test, IList<IFormFile> files)
{
...
}
It's not possible to combine multiple Content Types when sending a FormData object.
Append the string to the formData instance and set the name to test.
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
formData.append("test", test);
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: formData,
dataType: "json",
processData: false,
contentType: false,
});
}

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.

formdata is not working in IE 9,10,11 Jquery

I want to upload file into server ,for this i am using ajax and formdata to upload in server,Everything is working fine in Chrome but not working in IE version 9,10,11.
var formdata = new FormData();
for (var i = 0; i < fileInput.files.length ; i++) {
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
if( fileInput.files.length>0){
$.ajax({
url:path,
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: formdata,
success: function (result) {
},
error: function (err) {
return false;
}
});
}

How to access json response that have the following format

I get a response like this:
{
"data": [
"http:\/\/www.domain.com.br\/anunciantes\/jorgediaz.y.com.r\/26\/img1.jpg",
"http:\/\/www.domain.com.br\/anunciantes\/jorgediaz.t.com.r\/26\/img2.jpg"
]
}
I have tried:
$.ajax({
url: "/imovel/recuperar_fotos",
datatype: 'JSON',
contentType: 'JSON',
success: function (data) {
var i = 0;
while(i < 3)
{
alert(data[i]);
i++;
}
}
});
and also data[0][i] doesn't work.
It is because you are receiving an object that has a data property that is an array. Therefore you could iterate over response.data (or data.data, following your code naming).
Here you have 3 ways to iterate over an array (and avoid the while loop)
Using array's forEach method
$.ajax({
url: "/imovel/recuperar_fotos",
datatype: 'JSON',
contentType: 'JSON',
success: function (response) {
var photos = response.data;
photos.forEach(function(photo) {
console.log(photo);
})
}
});
Using the for ... in
$.ajax({
url: "/imovel/recuperar_fotos",
datatype: 'JSON',
contentType: 'JSON',
success: function (response) {
var photos = response.data;
for (var i in photos) {
console.log(photos[i]);
}
}
});
Using the classig for loop
$.ajax({
url: "/imovel/recuperar_fotos",
datatype: 'JSON',
contentType: 'JSON',
success: function (response) {
var photos = response.data;
for (var i = 0; i < photos.length; i++) {
console.log(photos[i]);
}
}
});
Try this
$.ajax({
url: "/imovel/recuperar_fotos",
contentType: 'application/json',
success: function(res) {
for (i = 0; i < res.data.length; i++) {
alert(res.data[i]);
}
}
});

Fill Variable with Web Service Results

I have a javascript function that is executed onClick via jquery. Within this function I am calling a Web Service "getTestConnection" which returns a True or False and I have confirmed it is working but keeps returning variable undefined.
$("#btnNext2").click(function() {
var postData = {}; {
postData['user'] = user;
postData['password'] = password;
postData['serviceurl'] = serviceurl;
postData['datasource'] = datasource;
};
//Converts object to string and formats to JSON
var json = JSON.stringify(postData);
//connTest keeps getting returned as 'Undefined'
var connTest = getTestConnection(json);
});
< script type = "text/javascript" >
function getDocType(json, rowcount) {
$.ajax({
type: "POST",
url: "http://localhost:64580/Web_Services/WebServiceLibrary.asmx/GetDocTypes",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//*****************************************************************************
//This is being called immediately after getTestConnection is executed
//******************************************************************************
for (i = 0; i < data.d.length; i++) {
$('#SelectDocType' + rowcount + '')
.append($("<option></option>")
.attr("value", data.d[i].docTypeID)
.text(data.d[i].docTypeName));
}
var firstDocTypeID = data.d[0].docTypeID;
var jsonUnstringify = JSON.parse(json);
var postDataNew = {}; {
postDataNew['user'] = jsonUnstringify.user;
postDataNew['password'] = jsonUnstringify.password;
postDataNew['serviceurl'] = jsonUnstringify.serviceurl;
postDataNew['datasource'] = jsonUnstringify.datasource;
postDataNew['docTypeID'] = firstDocTypeID;
};
var jsonnew = JSON.stringify(postDataNew);
getKeywords(jsonnew, rowcount);
},
error: function(data) {
alert("***********Error***********" + data.responseText);
},
failure: function(data) {
alert("***********Failure***********" + data.responseText);
}
});
//Test Connection Web Service
function getTestConnection(json) {
$.ajax({
type: "POST",
url: "http://localhost:64580/Web_Services/WebServiceLibrary.asmx/TestConnection",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
if (data.d == 'True') {
return true;
} else {
return false;
}
},
error: function(data) {
alert("***********Error***********" + data.responseText);
},
failure: function(data) {
alert("***********Failure***********" + data.responseText);
}
});
}
< /script>
You have multiples errors:
You have a <script type = "text/javascript"> tag inside another <script> tag
You define a new function inside another function:
function getDocType(json, rowcount) {
$.ajax({
.....
});
function getTestConnection(json) {
....
}
}
which should be
function getDocType(json, rowcount) {
$.ajax({
.....
});
}
function getTestConnection(json) {
....
}
You forgot to get returned data from the AJAX call in your getTestConnection function :
$.ajax({
type: "POST",
url: "http://localhost...",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
if (data.d == 'True') {
return true;
} else {
return false;
}
},
error: function(data) {
....
}
});

Categories

Resources