jQuery, Forms and file uploads

uploading files with jquery

[anawaz]

Hi folks,

I'm in a bit of a pickle. I've got a page where we have a list of existing images that come from the database, along with a form to add new images. Now wach of the images listed also accesses other divs within the page using jquery to edit other parameters related to that image. When we upload a new image, I want to repopulate this list of images along with the edit and delete buttons.

Here is my problem: I was able to upload images with AJAX quite easily without having to refresh the page. The list also repopulated itself, but none of my edit or delete buttons worked.

Then I switched to jQuery with .live(). Now my issue is that the buttons will work, but I can't get jQuery to pass the type="file" across to my php script so it doesn't pick up the file. I don't really want to use the jQuery form plug-in. I've got a lot of custom code going for this application for other form manipulation and validation, and I'd just like to get this working.

I am assuming the problem is that I am somehow unable to get the enctype="multipart/form-data" portion of my form across to the php script via jquery.

So, without further adue, here is my jQuery code:

$('#photo-form').live('submit', function() {
$('#uploadingimage').show();
$.ajax({ // create an AJAX call...
  data: $(this).serialize(), // get the form data
  type: $(this).attr('method'), // GET or POST
  enctype: $(this).attr('enctype'),
  url: $(this).attr('action'), // the file to call
  success: function(response) { // on success..
$('#uploadingimage').hide();
$('#upload_area').html(response);// update the DIV
  }
 });
 return false; // cancel original event to prevent form submitting
});

My HTML form has all the attributes defined, but it just doesn't seem to pick up $_FILES['file_name']['name'] or any other part of the $_FILES array on the other end!

Help, please.

[anawaz]

OK, so I've rewritten my JQuery to use the iframe to post an image to my php file without refreshing the page. It all works - the only issue is that I don't want to display the results of my php file within the iFrame - I want to display them outside the iframe and and hide the iframe.

Here is what I have:

$("#upload-button").click(function() {
var filename = $('form#filename').val();
var pieceID = $('form#pieceID').val();
var maxSize = $('form#maxSize').val();
var maxW = $('form#maxW').val();
var maxH = $('form#maxH').val();
var fullPath = $('form#fullPath').val();
var relPath = $('form#relPath').val();
var colorR = $('form#colorR').val();
var colorG = $('form#colorG').val();
var colorB = $('form#colorB').val();
var pic_name = $('form#pic_name').val();
var pic_description = $('form#pic_description').val();
var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
$('div#iframe').append( iframe );

$('#photo-form').attr( "action", "upload.php" ),
$('#photo-form').attr( "method", "post" ),
$('#photo-form').attr( "filename", filename ),
$('#photo-form').attr( "pieceID", pieceID ),
$('#photo-form').attr( "maxH", maxH ),
$('#photo-form').attr( "maxW", maxW ),
$('#photo-form').attr( "fullPath", fullPath ),
$('#photo-form').attr( "relPath", relPath ),
$('#photo-form').attr( "colorR", colorR ),
$('#photo-form').attr( "colorG", colorG ),
$('#photo-form').attr( "colorB", colorB ),
$('#photo-form').attr( "pic_name", pic_name ),
$('#photo-form').attr( "pic_description", pic_description ),
$('#photo-form').attr( "enctype", "multipart/form-data" ),
$('#photo-form').attr( "encoding", "multipart/form-data" ),
$('#photo-form').attr( "target", "postframe" ),
$('#photo-form').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#upload_area").html(iframeContents);
}
);
return false;
});

With this code, the results of of upload.php show inside the iframe. I don't want that. I have to show the results in the div upload_area, which technically exisits outside of the iframe and I'd like to keep it that way.

Help, please!

[anawaz]

Should also mention that I've tried to fiddle with it, but applying .hide() to the iframe and then trying to append iframeContents to #upload area, but it didn't work!

[mozgolom]

I can not understand where mistake