Home >Backend Development >PHP Tutorial >PHP+iFrame implements asynchronous file upload without page refresh, _PHP tutorial
PHP+iFrame implements asynchronous file upload without page refresh, _PHP tutorial
- WBOYOriginal
- 2016-07-13 10:18:53922browse
PHP+iFrame implements asynchronous file upload without page refresh,
The example in this article describes PHP+iFrame's implementation of asynchronous file upload without page refresh, which is a very practical and common technique. Share it with everyone for your reference. The specific analysis is as follows:
Speaking of iframe, fewer and fewer people use it now, and many people believe that it should be replaced by AJAX. This is true, because AJAX is so good.
However, there is one situation where I still choose iframe for implementation. This is the asynchronous upload of files that this article is about. If you are interested, you can try it. If you use native AJAX to implement it, it should be much more complicated.
Let’s first fill in the basic knowledge for beginners:
1. The iframe tag usually specifies its name attribute for identification;
2. Determine the submission destination through action (target address) and target (target window, default is _self) in the form;
3. Point the target in the form to the name of the iframe, and the form can be submitted to the hidden frame iframe;
4. The content in the iframe is actually a page, and the parent object in js refers to the parent page, that is, the page in which the iframe is embedded;
5. Use the move_uploaded_file() function in PHP to implement file upload. The $_FILES array stores information related to the uploaded file.
What this article implements is an example where a user selects an avatar file and immediately uploads it and displays it on the page. Without further ado, the idea is as follows:
1. Embed an iframe in the form and set the name attribute value;
2. A js function is triggered when the value of the control for selecting file upload changes. This function submits the form to the iframe, and the page embedded in the iframe is used to process the file upload;
3. After completing the file upload in the iframe, operate the parent page through parent in js, display the image in a specific tag, and assign the save address of the image to a hidden field;
4. Return to the original page. Now the file upload is completed and the file path is recorded in the hidden field. The entire process does not refresh the page;
5. Finally, the user only needs to reset the values of the action and target attributes of the form when submitting the original page.
The following is a screenshot of the effect and the code to implement it:
upload.php page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iFrame异步文件上传</title>
</head>
<body>
<h1>iFrame异步文件上传</h1>
<form method="post" enctype="multipart/form-data">
用户名: <input type="text" name="username" /><br />
PHP+iFrame implements asynchronous file upload without page refresh, _PHP tutorial: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" />
<iframe style="display:none" mce_style="display:none" name="uploadframe"></iframe>
<input type="hidden" id="photo" name="photo" value="" />
<div id="displayphoto"></div>
<input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" />
</form>
<?php
//页面提交后显示相关信息
if (isset($_POST['submitted'])) {
$html = '<hr /><p>上传成功！</p>';
$html .= '<p>用户名：'.htmlspecialchars($_POST['username']).'</p>';
$html .= '<p>头像地址：'.htmlspecialchars($_POST['photo']).'</p>';
$html .= '<div><img src="'.htmlspecialchars($_POST['photo']).'" mce_src="'.htmlspecialchars($_POST['photo']).'" / alt="PHP+iFrame implements asynchronous file upload without page refresh, _PHP tutorial" ></div><hr />';
echo $html;
}
?>
</body>
</html>
<mce:script type="text/javascript"><!--
//选择了文件后开始异步上传
function startUpload(oForm) {
document.getElementById('displayphoto').innerHTML = 'Loading...';
oForm.action = 'proceedupload.php';
oForm.target = 'uploadframe';
oForm.submit();
}
//整个页面的提交
function formSubmit(oForm) {
oForm.action = document.URL;
oForm.target = '_self';
oForm.submit();
}
// --></mce:script>
proceedupload.php page is as follows:
<?php
//这里仅以特定图片格式举例，本应动态获取
$url = 'upload/img' . time() . '.jpg';
if (move_uploaded_file($_FILES['uploadphoto']['tmp_name'], $url)) {
//删除之前的图片
$_POST['photo'] !== '' && unlink($_POST['photo']);
?>
<html>
<head>
<body onLoad="doneLoading(parent, '<?=$url?>')">
</body>
</html>
<mce:script type="text/javascript"><!--
//在页面上显示刚刚上传成功的图像
function doneLoading(theFrame, url) {
var oDiv = theFrame.document.getElementById('displayphoto');
oDiv.innerHTML = '<img src="' + url + '" mce_src="' + url + '" alt="PHP+iFrame implements asynchronous file upload without page refresh, _PHP tutorial" />';
theFrame.document.getElementById('photo').value = url;
}
// --></mce:script>
<?php
}
?>
Interested friends can test and run the example of this article. I believe that what this article describes has certain reference value for everyone to learn PHP programming.