Question

I have a ajax image upload script which i found here

http://www.fengcool.com/2009/06/ajax-form-upload-local-image-file-without-refresh/

The problem i’m having is removing the image from the server.

I read in the comments that I need to do an ajax call to call a php file to unlink the image.

The php file isn’t a problem and i think i have the ajax call correct (may need checking) but i need to know how to pass the filename variable created in the upload function to the remove function.

The filename is created here

function addUpload(id,img){

   var loader = $(document.getElementById('loader'));
   loader.hide();

   var div = $(document.createElement('div')).attr('id',id).attr('class','uplimg');

   //add uploaded image
   div.html("<img src='/admin/"+img+"'><br />");

   //add text box
   fileName = img.substring(img.lastIndexOf("/")+1);

and i need to put the filename in here

function removeUpload(e){


   var removeId = $(e.target).attr('alt');

   alert(filename);

            //ajax call to unlink image using php
    /*$('#'+removeId).click(function(){
        $("#uploaded_thumb")
            .html(ajax_load)
            .load(loadUrl, {filename: filename});
    });

   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled'); */
}

How do i get the filename from one function to another and am i doing the ajax call correct? I want to pass in the url a variable called filename which will be the filename

here is the entre script

var frameId = 'frame_ID';      //hidden frame id
var jFrame = null;                //hidden frame object
var formId = 'form_ID';         //hidden form id
var jForm = null;                 //hidden form object
var fileMax = 3;                  //maximum number of file to be uploaded
var fileCount = 0;               //file counter
var uploadUrl = "/admin/save.php"; //where to handle uploaded image
var filename = null;
var loadUrl = "/admin/load.php";
    var imgName='';

$(document).ready(function(){                     

jForm = createForm(formId);       //create hidden form
jForm.hide(); 
jFrame = createUploadIframe(frameId)   //create hidden iframe
jFrame.hide();

//append hidden form to hidden iframe
jForm.appendTo('body');         
jForm.attr('target',frameId);              //make form target to iframe

$("#inp").bind('change',startUpload);   //bind onchange function to input element

function startUpload(){
   if(jForm!=null){               
      jForm.remove();                        //re-create hidden form
      jForm = createForm(formId);
      jForm.appendTo('body');
      jForm.attr('target',frameId);
   }

   document.getElementById('loader').style.display="block";

   var newElement = $(this).clone(true);   //clone input element object
   newElement.bind('change',startUpload); //bind onchange function. detect iframe changes
   newElement.insertAfter($(this));          //insert clone object to current input element object
   $(this).appendTo(jForm);

   jForm.hide();                   
   jForm.submit();                     //let's upload the file

   jFrame.unbind('load');                  
   jFrame.load(function(){               //bind onload function to hidden iframe

      //get response message from hidden iframe
      var myFrame = document.getElementById($(this).attr('name'));   
      var response = $(myFrame.contentWindow.document.body).text();

      /*
      * you may handle upload status from reponse message.
      * in this example, upload succeeded if message contains ".gif" , otherwise, alert reponse message
      */

      if((response.indexOf('.jpg')) || (response.indexOf('.gif')) !=-1) { //upload successfully

         addUpload(Math.floor(Math.random()*100),response);   //show thumbnails, add text box with file name
         fileCount++;
         if(fileCount >= fileMax){                     //reach maximum upload file, disable input element
            $("#inp").attr('disabled','disable');
         }
      }else{  //error
         alert(response);
      }
   });
}


});

function createUploadIframe(id){
   //set top and left to make form invisible
   return $('<iframe width="300" height="200" name="' + id + '" id="' + id + '"></iframe>')
         .css({position: 'absolute',top: '270px',left: '450px',border:'1px solid #f00'})
         .appendTo('body');
}

function createForm(formId) {
      return $('<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + 
            '" enctype="multipart/form-data" style="position:absolute;border:1px solid #f00;'+
            'width:300px;height:100px;left:450px;top:150px;padding:5px">' +
            '</form>');
}


function addUpload(id,img){

       imgName = img.substring(img.lastIndexOf("/")+1);

    var loader = $(document.getElementById('loader'));
    loader.hide();

   var div = $(document.createElement('div')).attr('id',id).attr('class','uplimg');

   //add uploaded image
   div.html("<img src='/admin/"+img+"'><br />");

   //add text box
   fileName = img.substring(img.lastIndexOf("/")+1);
   var txtbx = $(document.createElement('input')).attr('name','myimg').attr('type','text').val(fileName);
   /* you may want to change textbox to a hidden field in production */
   //var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','hidden').val(fileName);
   txtbx.appendTo(div);

   //add remove thumbnail link
   var rem = $(document.createElement('a'))
                               .attr('alt',id)
                               .attr('href','javascript:;')
                               .text("Remove").click(removeUpload);      
   rem.appendTo(div);


   //add to the page
   div.appendTo("#uploaded_thumb");
}

function removeUpload(e){

   var removeId = $(e.target).attr('alt');


        //this should call the function to unlink the file (php)
    $('#'+removeId).click(function(){
        $("#uploaded_thumb")
            .html(ajax_load)
            .load(loadUrl, {filename: imgName});
    });

   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled');
}

UPDATE:

I’ve tried using this function to replace removeUpload() but it still doesn’t work. It doesn’t even do an alert box.

I got an example from the jquery website becuase in theory there should be a click event attached to the link and when the function is called it justs needs to call the ajax call for the php script

Am i on the right track?

function removeUpload(e){

   var removeId = $(e.target).attr('alt');

    $.post("delete.php", {filename: imgName},
        function(data){
          alert("Deleted !!");
      });


   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled');
}

Answer 1

Create a variable just below the <script> tag with global scope so that you can assign value of image to it later from addUpload function:

<script>
imgName = '';

Now add this line to addUpload function:

function addUpload(id,img){
  imgName = img;
  ..............
}

Later you can access imgName variable where you want.

Update:

Instead of:

   $('#'+removeId).click(function(){
        $("#uploaded_thumb")
            .html(ajax_load)
            .load(loadUrl, {filename: imgName});
    });

Use:

$('#'+removeId).click(function(){
  $.post("delete.php", {filename: imgName},
    function(data){
      alert("Deleted !!");
  });
});

Later in your script, you can get image name like this:

$_POST['imgName']; // php
Request.Form("imgName") // asp

More Info:

http://api.jquery.com/jQuery.post/