I have problem with jQuery. When I upload image in Chrome it performs the AJAX successfully and I am able to update the page with the response data. But in IE 11 and Firefox it does not. The code:
$(".newfoto").on('submit', (function(e) {
$("#mailresult").html('<img src="themes/standart/iconss/spin1.gif" alt="loading..." /><p>Please, wait...</p>');
e.preventDefault();
$.ajax({
url: "dataok.php?act=foto",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data) {
$("#mailresult").html(data);
setTimeout(function() {
$("#mailresult").empty();
}, 2000);
var imgTag = '<img src="image.php?imgid=' + escape($('.myphoto').attr('id')) + '" />';
$('.myphoto').html(imgTag);
},
error: function() {}
});
}));
The correct way to prevent the form from submitting and reloading the page is to use a return false;
at the end of the submit function. This will also replace e.preventDefault();
in your code.
Also, FormData
is not supported on all browsers. See https://stackoverflow.com/a/2320097/584192 . You may need to detect and workaround this.
$(".newfoto").on('submit', function(e) {
$("#mailresult").html('<img src="themes/standart/iconss/spin1.gif" alt="loading..." /><p>Please, wait...</p>');
$.ajax({
url: "dataok.php?act=foto",
type: "POST",
data: (typeof FormData === 'function') ? new FormData(this) : $(this).serialize(),
contentType: false,
cache: false,
processData: false,
success: function(data) {
// success
},
error: function(jqXHR, status, error) {
console.log(error);
}
});
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.