PHP+Ajax无刷新带进度条图片上传示例


Posted in PHP onFebruary 08, 2017

项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条。所需插件:jquery.js,jquery.form.js。

最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图

PHP+Ajax无刷新带进度条图片上传示例

本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载。

第一步,建立前端页面index.html

此段是前端展示内容,这里需要说明的是由于input:file标签显示不太美观,所以我把它隐藏了。而使用一个a标签.uploadbtn来调用file标签的click事件,用来打开并选择文件。

注意:文件上传时form的属性enctype必须设置为:multipart/form-data

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
</head>
<body>
<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
 <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
 <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
 </form>
 <div class="imglist"> </div>
 <p class="res"></p>
 <div class="progress">
 <div class="progress-bar progress-bar-striped"><span class="percent">50%</span></div>
 </div>
 <a href="javascript:void(0);" rel="external nofollow" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</div>
</body>
</html>

第二步,Ajax提交部分

这部份就是Ajax的提交部份,过程如下:

  • 在提交开始通过beforeSend回调函数设置进度条显示出来,进度条宽度为0%,进度值0%;
  • 在上传过程中通过uploadProgress回调函数实时返回的数据,更改进度条的宽度和进度值。
  • 在上传成功后,通过success回调函数输出上传为数据信息(图片名称,大小,地址等)并把图片输出到页面上预览。
  • 当然如果失败,有error回调函数帮你进行高度。
<script type="text/javascript">
$(document).ready(function(e) {
 var progress = $(".progress"); 
 var progress_bar = $(".progress-bar");
 var percent = $('.percent');
 $("#uploadphoto").change(function(){
 $("#myupload").ajaxSubmit({ 
 dataType: 'json', //数据格式为json 
 beforeSend: function() { //开始上传 
 progress.show();
 var percentVal = '0%';
 progress_bar.width(percentVal);
 percent.html(percentVal);
 }, 
 uploadProgress: function(event, position, total, percentComplete) { 
 var percentVal = percentComplete + '%'; //获得进度 
 progress_bar.width(percentVal); //上传进度条宽度变宽 
 percent.html(percentVal); //显示上传进度百分比 
 }, 
 success: function(data) {
 
 if(data.status == 1){
 var src = data.url; 
 var attstr= '<img src="'+src+'">'; 
 $(".imglist").append(attstr);
 $(".res").html("上传图片"+data.name+"成功,图片大小:"+data.size+"K,文件地址:"+data.url);
 }else{
 $(".res").html(data.content);
 }
 progress.hide(); 
 }, 
 error:function(xhr){ //上传失败 
 alert("上传失败"); 
 progress.hide(); 
 } 
 }); 
 });
 
});
</script>

第三步,后端PHP代码upload.php

后端处理代码,就是PHP文件上传,不过上传的时候需要做一些判断,如文件格式、文件大小等。

注意:我上面ajax返回格式是json,所以在图片json代码是一定要正确规范,否则会出现上传不成功的提示。

$picname = $_FILES['uploadfile']['name']; 
 $picsize = $_FILES['uploadfile']['size']; 
 if ($picname != "") { 
 if ($picsize > 2014000) { //限制上传大小 
 echo '{"status":0,"content":"图片大小不能超过2M"}';
 exit; 
 } 
 $type = strstr($picname, '.'); //限制上传格式 
 if ($type != ".gif" && $type != ".jpg" && $type != "png") {
 echo '{"status":2,"content":"图片格式不对!"}';
 exit; 
 }
 $rand = rand(100, 999); 
 $pics = uniqid() . $type; //命名图片名称 
 //上传路径 
 $pic_path = "images/". $pics; 
 move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path); 
 } 
 $size = round($picsize/1024,2); //转换成kb 
 echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":"上传成功"}';

demo下载: php-ajax-upload_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
3种平台下安装php4经验点滴
Oct 09 PHP
php SQL防注入代码集合
Apr 25 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
Aug 02 PHP
PHP语言中global和$GLOBALS[]的分析 之二
Feb 02 PHP
php模拟js函数unescape的函数代码
Oct 20 PHP
Zend Studio去除编辑器的语法警告设置方法
Oct 24 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
Nov 12 PHP
微信营销平台系统?刮刮乐的开发
Jun 10 PHP
访问编码后的中文URL返回404错误的解决方法
Aug 20 PHP
一个php生成16位随机数的代码(两种方法)
Sep 16 PHP
php给图片添加文字水印方法汇总
Aug 27 PHP
phpStudy访问速度慢和启动失败的解决办法
Nov 19 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
Feb 08 #PHP
php制作基于xml的RSS订阅源功能示例
Feb 08 #PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
Feb 08 #PHP
php实现XML和数组的相互转化功能示例
Feb 08 #PHP
PHP 获取指定地区的天气实例代码
Feb 08 #PHP
PHP使用DOM和simplexml读取xml文档的方法示例
Feb 08 #PHP
PHP判断数组是否为空的常用方法(五种方法)
Feb 08 #PHP
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php数据访问之查询关键字
2016/05/09 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
简单实现php上传文件功能
2017/09/21 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python 循环数据赋值实例
2019/12/02 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
天游软件面试
2013/11/23 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2014年行政工作总结
2014/11/19 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
正规欠条模板
2015/07/03 职场文书
2016年校长新年寄语
2015/08/17 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
如何在Python项目中引入日志
2021/05/31 Python