PHP Ajax JavaScript 实现 无刷新附件上传
对一个网站而言,有一个基本的不可缺少的功能,那就是文件上传。使用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 Ajax JavaScript 实现 无刷新附件上传的更多相关文章
- js+ajax+springmvc实现无刷新文件上传
话不多说直接上代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- 【JS】ajax 实现无刷新文件上传
一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- ie8实现无刷新文件上传
ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...
随机推荐
- .NET Core2.0+MVC 用Redis/Memory+cookie实现的sso单点登录
之前发布过使用session+cookie实现的单点登录,博主个人用的很不舒服,为什么呢,博主自己测试的时候,通过修改host的方法,在本机发布了三个站点,但是,经过测试,发现,三个站点使用的sess ...
- 关于sg90舵机的,要知道!要注意!
这类舵机的转向跟频率和占空比相关,两者缺一不可! 1.在一个特定的频率下,特定的占空比使得舵机会转到一个角度,占空比不变,则角度不会不会变化,所以想要舵机动,就要在国定的频率下不断改变占空比. 2.当 ...
- Linux(四)使用Xshell5远程登录
Xshell5和Xftp5的安装包 链接:https://pan.baidu.com/s/1q3-ch75TW3lvC3KX25klNQ 密码:m31n 说明: 公司开发的时候,具体情况是这样的: 1 ...
- 51 nod 1456 小K的技术(强连通 + 并查集)
1456 小K的技术 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 苏塞克王国是世界上创新技术的领先国家,在王国中有n个城市 ...
- [USACO12OPEN]书架Bookshelf
Description 当农夫约翰闲的没事干的时候,他喜欢坐下来看书.多年过去,他已经收集了 N 本书 (1 <= N <= 100,000), 他想造一个新的书架来装所有书. 每本书 i ...
- hdu 5014(贪+位运算)
题意:给你n+1个数(0->n),让你为这n+1个数在0->n中分别找一个数与其异或,求最后的最大值 思路:假设一个数5 (二进制1 0 1),则找的另一个数在5的0位上最好是1 , 1位 ...
- BZOJ4926 皮皮妖的递推
第二次乱出题.为了方便,以m=2为例,把原式变一下形,得f(i)+f(f(i-1))=i我们先无视掉那个-1,我们发现:诶,这个东西好像斐波那契数列.具体地,我们用f(n)表示把n用斐波那契数列进行拆 ...
- CTSC2017 铁牌记
Day 0: 先到了丽都酒店. 看见北京八十中学生在发胸牌手册和T恤,领完之后开始分房间. 我和ryc一屋,lyd和ysq一屋,yzy和gzz分到了珀利酒店,老师尝试了半天把我们分到一个酒店,失败了. ...
- 算法工程师:双非渣硕是如何获得百度、京东双SP
本人本科硕士皆双非,和牛客大佬们没得比,目前拿到的还可以的offer就是百度SP和京东SP,都是做的推荐算法,其他的不说了. 先说一下个人经历吧,学校比较水,实验室没有项目,实习经历:腾讯实习+滴滴实 ...
- Java instanceof 关键字是如何实现的?
作者:RednaxelaFX链接:https://www.zhihu.com/question/21574535/answer/18998914来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...