通过弹出窗口上传文件PHP

Question

Good day,
I was currently design a form that has 10 fields (3 of them requires upload file while the others are using normal <input> functions). Here i will only show a sample code for my form with the upload function that will trigger the popup box when the user clicks on the input on the form.

<form name="form1" action="process.php" method="post">
    <input type="text" id="form_ic" name="form_ic" size="30" onClick="return popup('pdf.php')">
    <a href="javascript:popup('pdf.php')">[Upload]</a>
</form>

For the upload file functions, i will need to do a popup box (pdf.php) from the original form php to show the terms stated for the files to be uploaded (eg. the file must be only .pdf and so on). The real upload function is only implemented on the form in pdf.php as follows:

<form name="pdf_upload" action="index.php" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="file" name="uploadfile" id="uploadfile">
    <button type="submit" name="submit" value="Upload" onClick="window.close();">Upload</button>
</form>

Here's the catch,

The purpose for this original form is to register the user profile. So what i want to do is that after user select the file from the upload popup box the file will be transferred back to the original form. The name of the file uploaded by the user will be displayed in the <input type="text" id="form_ic"> back in the original form. The pdf file transferred back to the original form will be submitted along with other field details (eg. name, age, etc). For your information, since there are 3 fields using the same upload function with popup, I will implement the same popup function.

I'm stuck of transferring the pdf file from the popup php to the original form php and to display the name of the uploaded file back in the original form php. I really need opinions from the community to solve this problem.

I am well aware that to display the name of .pdf file to the <input> , you'll require the javascript .innerHTML function, but i just can't retrieve the uploaded .pdf file from the pdf.php. It may be due to the problem with my code design. I'm not sure whether AJAX is required for my problem. Please help me.

Thank you.

Answer 1

Most of your code is right, but you need to make change in your approach.

First, from your pop-up (pdf.php), you should upload the file. Currently you are calling 'window.close' , hence the file is not submitted and upload functionality is not happening. While the modal box(Pop-Up) is open, let the file be uploaded and then through ajax, check if it is successful. If yes, then you can return the name of the file that it is saved as on server. This file name, you can pass to your main Form (Field should be Un-editable)

Second, you should change your JS code such that whenever you call the Pop-Up, you send the ID of the TextField of the Main Form, so that after file upload, the javascript sends the filename to the same field.

If you need more codebased example, then you should refer this example http://www.web-development-blog.com/archives/upload-in-modal-window-and-pass-values-with-jquery/

Demo page of the above example can be found at: http://www.finalwebsites.com/demos/modal_upload_jquery_thickbox.php

Hope this helps to solve your problem.