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');
}
