php上传带进度条_PHP+Ajax无刷新带进度条图片上传示例
项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条。所需插件:jquery.js,jquery.form.js。
最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图
本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载。
第一步,建立前端页面index.html
此段是前端展示内容,这里需要说明的是由于input:file标签显示不太美观,所以我把它隐藏了。而使用一个a标签.uploadbtn来调用file标签的click事件,用来打开并选择文件。
注意:文件上传时form的属性enctype必须设置为:multipart/form-data
php-ajax无刷新上传(带进度条)demo
点击上传文件
第二步,Ajax提交部分
这部份就是Ajax的提交部份,过程如下:
在提交开始通过beforeSend回调函数设置进度条显示出来,进度条宽度为0%,进度值0%;
在上传过程中通过uploadProgress回调函数实时返回的数据,更改进度条的宽度和进度值。
在上传成功后,通过success回调函数输出上传为数据信息(图片名称,大小,地址等)并把图片输出到页面上预览。
当然如果失败,有error回调函数帮你进行高度。
$(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= '';
$(".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();
}
});
});
});
第三步,后端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":"上传成功"}';
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php上传带进度条_PHP+Ajax无刷新带进度条图片上传示例相关推荐
- html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- 利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- asp如何将图片文件上传到mysql数据库中_怎样才能利用ASP把图片上传到数据库
欢迎来到小编的文章进行学习阅读,想必大家又有很多问题吧,在这里会有你想要收获的答案,请大家慢慢学习吧! ASP(Active Server Pages)是Microsoft很早就推出的一种WEB应用程 ...
- ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- Ajax无刷新实现图片切换特效
1.页面cs代码 using System; using System.Data; using System.Configuration; using System.Web; using System ...
- .net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
- php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
最新文章
- Matlab:成功解决引用了已清除的变量 handles
- $(document).ready、body.Onload()和 $(window).load的区别
- java程序中怎么保证多线程的运行安全_Java线程安全问答(草稿)
- java8 javafx_JavaFX技巧8:美丽深层
- java sheet 打印区域设定,如何使用Java设置电子表格的打印区域。(How to set the print area of a spreadsheet using Java.)...
- 软考 - 法律法规 标准化
- android socket 框架c#,C#与Android Socket通信
- 画面轻松浪漫的伪原创工具
- CCF CSP202112-2 序列查询新解
- 20 年“码龄”的老程序员如何看编程发展?
- PHP如何获取用户IP地址
- win10 多开 vpn
- mysql查询编辑器_navicat怎么进入查询编辑器
- 马云创业过程中的10次失败(转)
- 使用360安全卫士对计算机进行体检,360安全卫士使用教程 电脑体检
- TensorFlow Estimator学习笔记(二)Estimator自定义模型-使用卷积神经网络解决 MNIST 问题
- 30个Eclipse键盘快捷键大全,让你工作效率翻倍
- “cp: 略过目录 “问题
- gitlab 配置QQ邮箱
- wifi 小程序 透传_微信小程序一键连wifi
热门文章
- 怎样快速备份电脑文件?
- 纯css画一个月亮的天气图标
- 启动错误Passenger::SecurityException “Line too long”
- Google Maven Replacer Plugin插件详解
- 人工智能初步学习笔记
- 天才程序员之陨落:在业余项目创业 Cloudflare,公司上市前患病失去自理能力...
- 在windows电脑上配置kubectl远程操作kubernetes
- 学生信息管理系统 jsp + servlet + mysql (2020)
- Android Studio 设置背景色、修改前进后退快捷键
- 关于制作Unity动画的时候出现的问题: