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

<!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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • PHP+Ajax异步带进度条上传文件实例

    PHP+Ajax异步带进度条上传文件实例

    最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行. 前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • php+ajax实现带进度条的上传图片功能【附demo源码下载】

    php+ajax实现带进度条的上传图片功能【附demo源码下载】

    本文实例讲述了php+ajax实现带进度条的上传图片功能.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: <?php if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK) { ############ Edit settings ############## $UploadDirectory = 'F:

  • php 进度条实现代码

    复制代码 代码如下: <html> <head> </head> <body> <table width="400" border="0" cellspacing="1" cellpadding="1"> <tr> <td bgcolor="000000"> <table width="400" b

  • php ajax实现文件上传进度条

    本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下. 本实例有两个文件: upload_form.html: <!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1"

  • php+javascript实现的动态显示服务器运行程序进度条功能示例

    php+javascript实现的动态显示服务器运行程序进度条功能示例

    本文实例讲述了php+javascript实现的动态显示服务器运行程序进度条功能.分享给大家供大家参考,具体如下: 经常有这样的业务要处理,服务器上有较多的业务需要处理,需要分批操作,于是就需要一个提示客户现在完成进度的进度条. 这个是php+javascript的进度条. <?php //set_time_limit(0); //注意,如果是安全模式,请不要打开,如果不是安全模式,这个选项可以打开 for ($i = 0; $i < 500; $i++) { $users[] = 'Tom_

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

  • JQuery和PHP结合实现动态进度条上传显示

    Windows 环境下的修改方法 第一步:修改在php5下POST文件大小的限制 1.编修php.ini 找到:max_execution_time = 30 ,这个是每个脚本运行的最长时间,单位秒,改为:max_execution_time = 150 找到:max_input_time = 60,这是每个脚本可以消耗的时间,单位也是秒,修改为: max_input_time = 300 找到:memory_limit = 128M,这个是脚本运行最大消耗的内存,根据你的需求更改数值,这里修改

  • PHP利用APC模块实现文件上传进度条的方法

    本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在

  • PHP+FLASH实现上传文件进度条相关文件 下载

    PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个临时文件里面,而php无法获得这个文件的路径及大小.      从Actionscript 2.0开始,Flash支持文件上传及下载了.虽然不能在服务端获得文件上传进度,但我们可以在服务端获得文件的发送进度.根据这个原理,用Flash就能做出上传进度条效果.      我在网上看到过一些资料,但是感觉有缺陷.于是自己研究了一下,在前人的基础上加强了程

  • PHP实现的进度条效果详解

    PHP实现的进度条效果详解

    本文实例讲述了PHP实现的进度条效果.分享给大家供大家参考,具体如下: 在做采集的时候,想通过php来实现一个进度条功能,谷歌了一下,找了个合适的代码.下面直接上代码: <?php //防止执行超时 set_time_limit(0); //清空并关闭输出缓存 ob_end_clean(); //需要循环的数据 for($i = 0; $i < 188; $i++) { $users[] = 'Tom_' . $i; } //计算数据的长度 $total = count($users); //

  • php实现简单的上传进度条

    php实现简单的上传进度条

    Web上传文件的三种解决方案分享给大家: 这里我要使用的是form法.通过为表单元素设置enctype="multipart/form-data"属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传. 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是uploadprogres

随机推荐