Ajax File Upload
2015-06-22 16:34
381 查看
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 percentageis 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 my custom 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:
Contact Vishal007 • 4
years ago
what is common.php??
12
•
Reply
•
Share ›
Hell Contact
Vishal007 • 3
months ago
that's your ass where you put the php code to actually upload the file.
•
Reply
•
Share ›
相关文章推荐
- ASCII码表
- 黑马程序员----Java语法基础(2){语句,函数,数组}
- HTML基本知识
- JS实现归并排序
- 初识android可能遇到的问题
- Ubuntu14.04 安装Tiled Map Editor(地图编辑器)
- linux创建debugfs文件并进行读写操作
- JSP页面中四种“返回按钮”的使用
- centos7服务安装_流媒体服务器_安装nginx
- 第十五周 项目1-用二进制文件处理学生成绩
- 论新时代软件测试人员的工作之道(四)自动化测试之单元及集成测试
- 登录功能测试总结
- java代码中后台向前台传递list或map集合案例
- spring上传文件-two
- 第十五周阅读程序1:二进制读写
- poj 1868 Antiarithmetic? 判断序列中是否有等差子序列
- MT7688 原厂sdk启动日志
- android app卸载以后弹出用户反馈界面
- 机器学习入门:机器学习概论
- spring的上传下载