Insert filename in textbox

H开发者_StackOverflow社区ow do i insert the filename of uploaded file using this --> http://www.fengcool.com/2009/06/ajax-form-upload-local-image-file-without-refresh/ or valums.com/ajax-upload/ in a existing text input?

(I'm using php)

Textbox ex.

<input name="image" type="text" value="file_name" />

You have to have the actual upload processing PHP page respond with the filename of the uploaded file.

In fengcool's ajax, it is provided in startUpload() function with:

var response = $(myFrame.contentWindow.document.body).text();

You use that "response" variable wherever you need to put the filename.

It is actually passed as variable "image" to the addUpload() function, which you can modify to also populate your text box, approximately like this:

document.getElementById("image").value=image

You should probably however name your <input> in a less generic fashion to avoid confusion.

UPDATE, what to do:

1) name your textbox in a more unique way, for example:

<input id="uploaded_image_name" type="text" value="" />

// Note also that I have used "id" rather than "name", in order to be able to use Javascript function getElementById()

2) use fengcool's ajax, and change the function addUpload() like this:

function addUpload(id,img){
   var div = $(document.createElement('div')).attr('id',id);

   //add uploaded image
   div.html("<img src='"+img+"'><br />");
   document.getElementById("uploaded_image_name").value=img

   //add text box
   var fileName = img.substring(img.lastIndexOf("/")+1);
   var txtbx = $(document.createElement('input')).attr('name','img[]').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");
}

Note that the only change was the addition of the 4th command in the function.