PHP Ajax实现无刷新附件上传
对一个网站而言，有一个基本的不可缺少的功能，那就是文件上传。使用PHP预压来实现文件上传可谓是有得天独厚的优势的，那么今天，就一起来做一个关于无刷新实现的文件上传吧。
--------------------------------------------------------------------------------
普通表单
前端页面
<form action="./fileupload.php" method="POST"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <input type="submit" value="Register" /> </form>
后台处理
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。
···
带有文件的表单
带有文件的表单和普通表单是有很大的区别的，首先我们要在表单上声明一个属性，如下：
<form enctype='multipart/form-data'>
来告诉服务器，我们上传的表单包含有文件信息。
刷新方式
谈到刷新模式，也就是点击完submit之后，页面跳转到业务处理界面。这也是我们普通方式实现的表单的数据提交。
前端界面
<form action="./fileupload.php" enctype="multipart/form-data" method="post"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <p>Photo<input type="file" name="photo" /></p> <input type="submit" value="Register" />
后台页面
后台处理除了普通的表单数据之外，最重要的是处理文件信息。PHP内置了一个函数，可以方便的把上传过来的文件从临时的数据区转移到我们的目标文件夹，实现上传的业务逻辑。
move_uploaded_file('临时文件路径','目标文件路径');
无刷新方式
使用无刷新方式，与使用刷新方式的唯一的区别就是阻止了页面的跳转，我们通常会有两种方式来实现。
•在表单提交事件的末尾加上return false。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止页面跳转
return false;
}
</script>
•使用h5相关方式。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止页面跳转
event.preventDefault();
}
</script>
其他的操作处理与带跳转的保持一致即可。
大文件上传
虽然PHP实现其文件上传很方便，也很快速。但是上传文件的大小并不是无限制的。默认来说，有两个因素会限制我们上传文件的大小。
•post的极值
•upload的极值
我们可以通过手动的更改php.ini配置信息来实现上传文件大小的控制。
POST极值
post_max_size = 200M
upload极值
upload_max_filesize=200M
上传细节
ajax对象有一个叫upload的属性，而且upload也作为一个对象而存在。其拥有一个叫onprogress的方法，我们可以通过监测这个方法，来查看文件上传过程中的百分比。
前端页面
<!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>文件上传示例</title>
<script>
window.onload = function(){
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(evt){
// 收集表单信息
var fd = new FormData(form);
var ajax = new XMLHttpRequest();
// 给Ajax设置文件上传的感知事件
ajax.upload.onprogress = function(evt){
var loaded = evt.loaded;
var total = evt.total;
document.getElementById("progress").value =(loaded/total)*100;
}
ajax.onreadystatechange = function() {
if(ajax.readyState==4){
alert(ajax.responseText);
}
}
ajax.open('post','./fileupload.php');
ajax.send(fd);
// 阻止浏览器的跳转
evt.preventDefault();
//return false;
}
}
</script>
</head>
<body>
<h2>无刷新方式上传附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--设置进度条-->
<style>
#parent {width:300px;height:34px;border:1px solid #033;}
#son {width:100%;height:10%;background-color:green}
progress {width:100%;height:34px;}
</style>
<div id="parent">
<div id="son">
<progress id="progress">
</div>
</div>
<input type="submit" value="Register" />
</form>
</body>
</html>
后台处理
<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);
// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/";
// 获取文件的原始名称
$origin_name = $_FILES['photo']['name'];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;
if($_FILES['photo']['error']>0) {
die("出错了！".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo "<BR>"."Upload Success!";
}else{
echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];
}
?>
记得保证upload文件夹的存在性以及路径问题。
总结
文件上传是一个很基础的功能，实现起来也不是很复杂。但是这个功能却又是那么的重要，我们可以方便的通过文件上传来配合修改用户的诸如头像，以及其他文件信息。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面我们对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var fd = n
-
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl
-
php利用iframe实现无刷新文件上传功能的代码
复制代码 代码如下: <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/网页特效"> function startUpload() { document.getElementById('processing').in
-
php ajax无刷新上传图片实例代码
AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di
-
php+iframe实现隐藏无刷新上传文件
首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 复制代码 代码如下: <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" nam
-
PHP+JavaScript实现无刷新上传图片
html文件代码 <!-- ajax文件上传开始 --> <script type="text/javascript" src="/imageupload/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/imageupload/layer/layer.js"></script>
-
PHP无刷新上传文件实现代码
index.html 复制代码 代码如下: <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/javascript"> function startUpload() { document.getElementById
-
php+ajax无刷新上传图片的实现方法
本文实例讲述了php+ajax无刷新上传图片的实现方法.分享给大家供大家参考,具体如下: 1.引入文件 <!--图片上传begin--> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js">&l
-
php+html5实现无刷新图片上传教程
本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu
-
PHP Ajax实现无刷新附件上传
对一个网站而言,有一个基本的不可缺少的功能,那就是文件上传.使用PHP预压来实现文件上传可谓是有得天独厚的优势的,那么今天,就一起来做一个关于无刷新实现的文件上传吧. -------------------------------------------------------------------------------- 普通表单 前端页面 <form action="./fileupload.php" method="POST"> <p&g
-
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下 文件上传的表单格式 <form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" > <input id="fileToUpload" type="file" name=&q
-
asp.net 无刷新附件上传实现方法
最近参照网上的一些资料,初步到达了预期目标(客户端获取上传进度,还没发现什么好的方法,没有实现),利用iframe实现了附件的无刷新上传效果(其实有提交iframe),为了使用方便,最后做成了,.net用户自定义控制: 控件使用示例: 控件页面效果只是"添加附件"的图片,运行效果图一: 点击图片弹出文件选择框,运行效果图二 选中文件打开,文件开始上传,点击"停止"按钮,"正在上传"变为"等待上传","停止"
-
Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和
-
javascript仿163网盘无刷新文件上传系统
本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高.不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高.然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序.经过几次尝试才把整个结构封装好. 仿163网盘无刷新文件上传系统 .fu_list { width:600px; background:#ebebeb; font-size:12px; }
-
jQuery不使用插件及swf实现无刷新文件上传
文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式. 首先,我们在页面中放一个form,用来上传文件: 复制代码 代码如下: <form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx" enctype="multipart/form-data" ta
-
mvc file控件无刷新异步上传操作源码
前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传类的封装,html input控件file处理和后台controller的调用. 上传封装类: 此类主要两个功能,一些简单的筛选和文件重命名操作. 文件的筛选包括: 文件类型,文件大小 重命名: 其中默认为不进行重命名操作,其中重命名默认为时间字符串DateTime.Now.ToString("yy
-
asp.net 简便无刷新文件上传系统
ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性. 兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 重置 选择文件 重置 选择文件 ps:由于需要后台,要测试系统请下载实例测试. ps2:在完整实例文件中,还有一个文件属性查看实例. 程序说明 [upload] 程序中最重要的方法就是upload了,调用它就可以进行无刷新上传.