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

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

最近在做一个手机网项目，需要用到埃阿斯上传功图片能，项目要求服务器端编程语言(专业超文本预处理器的缩写)无刷新上传图片，并且要带进度条，下面就来讲一下我的实现方法，先看效果图

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

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

此段是前端展示内容，这里需要说明的是由于输入：文件标签显示不太美观，所以我把它隐藏了。而使用一个a标签。上传来调用文件标签的点击事件，用来打开并选择文件。

注意：文件上传时形式的属性enctype必须设置为：多部分/表单数据

！DOCTYPE html html towneta charset=' UTF-8 '标题PHP-Ajax无刷新上传（带进度条)demo/title meta name=' description ' content=' '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0，user-scale=0，最小值-比例尺=1.0，最大值-scale=1.0 '/脚本类型=' text/JavaScript ' src=' js/jquery '表单。js '/脚本链接-2。0 .3 .量滴js '/脚本类型=' text/JAVAScript ' src=' js/jquery。形式。js '/脚本链接href='margin:10px汽车；border : solid 1px # DDD ' overflow : hidden '表单id='myupload '操作='upload.php '方法=' post ' enctype=' multipart/form-data '输入类型=' file ' id='上传照片' name='上传文件' value='请点击上传图片style=' display : none '/form div class=' imglist '/div p class=' RES '/p div class=' progress ' div class='进度条进度条分条' span class=' percent ' 50%/span/div/div a href=' JavaScript : void(0)；rel='外部无跟随' onclick='上传照片。点击()“上传BTN”点击上传文件/a/div/body/html第二步，Ajax提交部分

这部份就是埃阿斯的提交部份，过程如下：

在提交开始通过发送前回调函数设置进度条显示出来，进度条宽度为0%,进度值0%;在上传过程中通过上传进度回调函数实时返回的数据，更改进度条的宽度和进度值。在上传成功后，通过成功回调函数输出上传为数据信息（图片名称，大小，地址等)并把图片输出到页面上预览。当然如果失败，有错误回调函数帮你进行高度脚本类型='text/javascript'$(文档)。就绪(函数{ var progress=$(').进步');var _进度条=$('。进度条');var百分比=$(' .百分比');$('#uploadphoto ').change(function(){ $('#myupload ')).ajaxSubmit({ dataType: 'json '，//数据格式为json beforeSend:函数(){ //开始上传进步。show()；var percentVal=' 0% '；进度条. width(百分比值);percent.html(百分比值);}，uploadProgress:函数（事件、位置、总计、百分比完成){ var percentVal=percent complete " % "；//获得进度进度条. width(百分比值);//上传进度条宽度变宽percent.html(百分比值);//显示上传进度百分比}，成功：函数（数据){ if(数据。status==1){ var src=数据。网址；var attstr=' img src=' http : ' src '；$('.imglist ').追加(attstr)；$('.RES ').html(")上传图片" data.name "成功，图片大小：' data.size 'K，文件地址：' '数据。网址)；}else{ $(' .RES ').html(数据。内容)；}进步。hide()；}，error:function(xhr){ //上传失败警报('上传失败');进步。hide()；} });});});/script第三步，后端服务器端编程语言(专业超文本预处理器的缩写)代码upload.php

后端处理代码，就是服务器端编程语言(专业超文本预处理器的缩写)文件上传，不过上传的时候需要做一些判断，如文件格式、文件大小等。

注意：我上面创建交互式、快速动态网页应用的网页开发技术返回格式是json，所以在图片json代码是一定要正确规范，否则会出现上传不成功的提示。

$ pic name=$ _ FIles[' upload FIle '][' name ']；$ pic size=$ _ FILES[' upload FIle '][' size ']；if ($picname！='') { if ($picsize 2014000) { //限制上传大小回应"{状态":0,"内容":图片大小不能超过2M ' } '；退出；} $ type=strtr($ pic name，'.');//限制上传格式if ($type！='.gif' $type！='.jpg' $type！=' png '){ echo ' { status ' :2，content': '图片格式不对！'}';退出；} $rand=rand(100，999)；$pics=uniqid().$ type//命名图片名称//上传路径$pic_path='images/' .$ pics move _ uploaded _ FIle($ _ FIles[' upload FIle '][' tmp _ name ']，$ pic _ path)；} $size=round($picsize/1024，2)；//转换成千字节回显"{状态":1,"名称":""。$picname .网址为“:”.$pic_path .'大小' : ' '。$尺寸.'内容' : '上传成功'}';演示下载：php-ajax-upload_jb51.rar

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