I have been developing my website for over a year now, and I am learning along the way. I am now working on an upload page that uses AJAX to process the upload and show a progress bar while it is doing it, after the file is uploaded it stores all the uploaded files temporarily in a session array then when the final button is pressed the image path will be stored in the database.
However, I have stumbled across an issue with AJAX - which I am not really good at - that I can't overcome. When the images are uploaded it shows a preview of these images with a small delete button over each image for users to delete the image they don't want anymore.
What I came to realization is that once I upload an image with AJAX the 'delete image' function won't process as the AJAX request has already been processed. Should I include the functions in separate '.js' files or am I just handling it wrong. an image to explain all of this
The AJAX code:
//file upload ajax
$(function() {
/* variables */
var bar = $('.bar');
var progress = $('.progress');
/* submit form with ajax request using jQuery.form plugin */
$('.upload_form').ajaxForm({
/* set data type json */
// dataType:'json',
/* reset before submitting */
beforeSend: function() {
bar.width('0%');
progress.css('display', 'block');
},
/* progress bar call back*/
uploadProgress: function(event, position, total, percentComplete) {
var pVel = percentComplete + '%';
bar.width(pVel);
},
/* complete call back */
complete: function(output){
// var responseMessage = $.parseJSON(data.responseText);
progress.css('display', 'none');
document.getElementById('next_step').innerHTML = ''.innerHTML = '<form method="post"><input type="submit" class="final_upload red_submit" name="uploadSubmit" value="الانتهاء" /></form>';
//$('.status-message').html('<p>'+output.responseText+'</p>');
var response = output.responseText;
var response_cut = response.substring(response.indexOf('<p class="n-st'), response.indexOf('cut text!'));
var response_preview = response.substring(response.indexOf('<div class="n-im'), response.indexOf('cut me!'));
$('.status-message').empty().html(response_cut);
$('#preview_images').empty().html(response_preview);
}
});
});
$(document).ready(function(){
$('#upload_btn').change(function(){
$('#upload_files').trigger('click');
});
});
//delete image on click
$(document).ready(function(){
$('.preview-img').click(function(){
var current_image = $(this);
var img_src = $(this).attr('data-img-src');
var img_count = parseInt($('.images_count').val());
var url = 'upload.php';
$.post(url, {del_img : img_src}, function(count_img){
console.log(count_img);
current_image.hide();
var new_count = img_count + 1;
$('.images_count').val(new_count);
$('.status-message').empty().html('تم مسح الصورة بنجاح، تبقى لديك '+new_count+' صورة');
});
});
});
Sorry for the language it is Arabic, but it doesn't mean anything important..
