Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You have to have the actual upload processing PHP page respond with the filename of the uploaded file.</p> <p>In fengcool's ajax, it is provided in startUpload() function with:</p> <pre><code>var response = $(myFrame.contentWindow.document.body).text(); </code></pre> <p>You use that "response" variable wherever you need to put the filename.</p> <p>It is actually passed as variable "image" to the addUpload() function, which you can modify to also populate your text box, approximately like this:</p> <p>document.getElementById("image").value=image</p> <p>You should probably however name your <code>&lt;input&gt;</code> in a less generic fashion to avoid confusion.</p> <p>UPDATE, what to do:</p> <p>1) name your textbox in a more unique way, for example:</p> <pre><code>&lt;input id="uploaded_image_name" type="text" value="" /&gt; </code></pre> <p>// Note also that I have used "id" rather than "name", in order to be able to use Javascript function getElementById()</p> <p>2) use fengcool's ajax, and change the function addUpload() like this:</p> <pre><code>function addUpload(id,img){ var div = $(document.createElement('div')).attr('id',id); //add uploaded image div.html("&lt;img src='"+img+"'&gt;&lt;br /&gt;"); 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"); } </code></pre> <p>Note that the only change was the addition of the 4th command in the function. </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload