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 相关文章推荐
PHP与MySQL交互使用详解
Oct 09 PHP
PHP 采集程序 常用函数
Dec 18 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
Jun 17 PHP
用php来限制每个ip每天浏览页面数量的实现思路
Feb 24 PHP
微信自定义菜单的处理开发示例
Apr 16 PHP
Yii针对添加行的增删改查操作示例
Oct 18 PHP
php简单截取字符串代码示例
Oct 19 PHP
PHP实现小偷程序实例
Oct 31 PHP
Windows下php+mysql5.7配置教程
May 16 PHP
php json转换相关知识(小结)
Dec 21 PHP
PHP标准库(PHP SPL)详解
Mar 16 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
Apr 23 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
php实现的在线人员函数库
2008/04/09 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
发布你的Python模块详解
2016/09/15 Python
python程序文件扩展名知识点详解
2020/02/27 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
主办会计岗位职责
2014/03/13 职场文书
端午节寄语2015
2015/03/23 职场文书
学校运动会开幕词
2016/03/03 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
详解PHP Swoole与TCP三次握手
2021/05/27 PHP