Uploading File with PHP and Client Side Scripting

来源：互联网发布：淘宝托管代运营编辑：程序博客网时间：2024/05/22 06:45

Step 1: The non-Javascript Implementation

The most basic structure of the script for doing the job is as following, this is from the description in <PHP MySQL All in One for Dummies>:

The user interface:

<html><head></head><body><form enctype="multipart/form-data" action="fileHdler.php" method="POST"><label>Upload File</label><br /><input type="hidden" name="MAX_FILE_SIZE" value="300000" /><input type="file" name="user_file" /><br /><input type="submit" value="Upload File" /></form></form>  </body></html>

And handler on server side:

<?phpif(isset($_FILES['user_file'])){echo 'The file exits: ' . $_FILES['user_file']['name'];echo '<br />';print_r( $_FILES['user_file']);if($_FILES["user_file"]["error"] == 0){move_uploaded_file($_FILES['user_file']['tmp_name'], 'upload/'.$_FILES['user_file']['name']);}}else{echo 'file does not exist.';}?>

When going through this test, I found something:

1. you still can specify the max size of the uploaded size, by adding a hidden input field with name 'MAX_FILE_SIZE';

2. the temp directory of the uploaded file is specified in php.ini, but you can never find that file under the temp directory;

3. the array of info for one uploaded file is like: Array ( [name] => cms.png [type] => image/png [tmp_name] => C:\php5\tmp\php127.tmp [error] => 0 [size] => 45006 )

4. even the submit type input, is accessible from server by $_POST['name'].

Step 2: To Improve User Experiences By Using Javascript

The way to handle file uploading just shown above has a problem with respect to uses' experience: the process must navigate the page away, and maybe you would say we could use the same page to play both the roles of uploader interface and handler, but that still cause the reload of the page. The concept of Ajax is asynchronously updating, that means only change the parts which need to be changed.

Can XMLHTTPRequest post file to server side? So far I have no idea, since no tutorial mentioned. Here is a sample work out that with pure Javascript, although it is called 'AJAX Blablabla':

js-uploader

The source code can be downloaded from the site. The idea of this method can be illustrated by this picture:

js-upload-iframe

First of all, you need a form, it is where you place your file uploader HTML element, and then the trick comes into play: let's add an iFrame element into the HTML page, but set its width and height are zero pixel to make it invisible. And the next up is to specify that form targeting at that iFrame.

When user press the upload button, we play an loading animation by revealing a GIF image, which always stands by there. Then on the server side, process the file(saving it into some path for instance) and then sleep for some time in case the file is large-size, the sleeping time of the server just the interval between the server handle the file and output the JS function code to the browser. Then output a literal Javascript code to the client, which will be rendered within the iFrame; but that only carries function but not visual element. So the browser will run the code and keep the iFrame invisible, and in the Js function, we hide the loading animation and output the result to the user.

So, in this way, we simulate the asynchronously upload process, but there is a problem: it is not easy to predicate the size of the file and estimate the uploading time, some time the file size could be small, but the animation is over-played for the user to wait. There is no case that the browser has removed the loading animation, but the server has not yet finished the processing, because the sleep function is invoked after that.

With that thinking, you can easily figure out how to implement a multiple file uploader.

http://www.coursesweb.net/ajax/multiple-upload-files_t

And now, shall we take a look at a more advanced sample, in terms of design and encapsulation, which is:

ajax

It is listed in this article, which collecting the Ajax file uploader. Here is a link talk about it in Chinese:

http://www.zhangxinxu.com/wordpress/2009/11/ajax-upload%E5%A4%9A%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%8F%92%E4%BB%B6%E7%BF%BB%E8%AF%91%E5%8F%8A%E4%B8%AD%E6%96%87%E6%BC%94%E7%A4%BA/

Step 4: With Help of XHR

Step 4: With Help of an Ajax Framework