Uploading File with PHP and Client Side Scripting
2012-02-27 17:07
585 查看
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:
And handler on server side:
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':
The source code can be downloaded from the site. The idea of this method can be illustrated by this picture:
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:
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
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:
<?php if(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':
The source code can be downloaded from the site. The idea of this method can be illustrated by this picture:
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:
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
相关文章推荐
- Web Publishing with PHP and FileMaker 9
- Authentication with SharePoint Online and the Client Side Object Model
- Preview image when uploading it on client side. Available for IE and FF
- Downloading a Remote File With cURL and PHP
- use curl to upload file with remote php file
- Value Objects and Data Access Objects with PHP 4.2.x[转载]
- The difference between text mode and binary mode with file streams
- Virtualbox mouse move in and out and file share with windows
- Install FFMPEG and FFMPEG-PHP in CentOS 6 with Virtualmin
- phpmyadmin,访问主页报错: Error during session start; please check your PHP and/or webserver log file and c
- Client and Server side Dynamic Pages
- TinyCore Nginx server with php-cgi and vsftpd
- Google Merchant How To Setup A Live XML Data Feed With MySql and PHP
- 创建模块化游戏(Creating Moddable Games with XML and Scripting Part I)代码阅读,关于整体架构!
- Robust and High Performance PHP with IIS: Using FastCGI | PHP Everywhere
- How to mount partition with ntfs file system and read write access
- Maven generates jar file with main class setting and dependency libs copy
- Laravel 出现"RuntimeException inEncrypter.php line 43: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths."问题的解决办法
- Uploading Files With PHP
- [置顶] Debugging and Profiling PHP with Xdebug