Ajax File Upload

前端之家收集整理的这篇文章主要介绍了Ajax File Upload前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax File Upload

You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded,etc. It is very easy to achieve this effect using javascript.

First off,I did not like using the term 'Ajax' when describing this method. But there is no other word that can be used. And this method fits within my definition of Ajax - "Sending or receiving data from the server without refreshing the page.". So I will name this method Ajax file upload.

Theory

The basic idea behind this effect is to redirect a form's action into a hidden IFrame. So,when the form with the file field is submitted,the result will appear in a IFrame. But since it is hidden,the user will not see it. This effect is achieved using the 'target' attribute of the Form tag.



See the small squire? That is the IFrame. Typically,it will be hidden.

Code

(X)HTML

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.PHP">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

JavaScript

function init() {
	document.getElementById('file_upload_form').onsubmit=function() {
		document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
	}
}
window.onload=init;

PHP

This should be inupload.PHP- the action of the form.

<?PHP
include('../../../common.PHP');
upload('file','.','txt,jpg,jpeg,gif,png');

The code to upload the file must be given here. I used one of mycustom functions to upload the file- it is not a native PHP function. Needless to say,this is not restricted to PHP - you can use any server side language here.

Update: Part two -Ajax File Upload Response Handling


//Some funny comments:

原文链接:https://www.f2er.com/ajax/163242.html

猜你在找的Ajax相关文章