前端显示界面： 1 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>上传文件</title>
   <script type="text/javascript">
     function sub() {
       var obj = new XMLHttpRequest();
       obj.onreadystatechange = function() {
         if (obj.status == 200 && obj.readyState == 4) {
           document.getElementById('con').innerHTML = obj.responseText;
         }
       }

       // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态
       obj.upload.onprogress = function(evt) {
         // 上传附件大小的百分比
         var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
         // 当上传文件时显示进度条
         document.getElementById('parent').style.display = 'block';
         // 通过上传百分比设置进度条样式的宽度
         document.getElementById('son').style.width = per;
         // 在进度条上显示上传的进度值
         document.getElementById('son').innerHTML = per;
       }

       // 通过FormData收集零散的文件上传信息
       var fm = document.getElementById('userfile3').files[0];
       var fd = new FormData();
       fd.append('userfile', fm);

       obj.open("post", "upload.php");
       obj.send(fd);
     }
   </script>
   <style type="text/css">
     #parent {
       width: 200px;
       height: 20px;
       border: 2px solid gray;
       background: lightgray;
       display: none;
     }
     #son {
       width: 0;
       height: 100%;
       background: lightgreen;
       text-align: center;
     }
   </style>
 </head>
 <body>
   <h2>Ajax实现进度条文件上传</h2>
   <div id="parent">
     <div id="son"></div>
   </div>
   <p id="con"></p>
   <input type="file" name="userfile" id="userfile3"><br><br>
   <input type="button" name="btn" value="文件上传" onclick="sub()">
 </body>
 </html>

后台处理页面：
f ($_FILES['userfile']['error'] > 0) {
                exit("上传文件有错".$_FILES['userfile']['error']);
                echo errors;
        }

        // 定义存放上传文件的真实路径
        $path = './upload/';
        // 定义存放上传文件的真实路径名字
        $name = $_FILES['userfile']['name'];

        // 将文件的名字的字符编码从UTF-8转成GB2312
        $name = iconv("UTF-8", "GB2312", $name);

        // 将上传文件移动到指定目录文件中
        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) {
                echo "文件上传成功";
        } else {
                echo "文件上传失败";
        }
 ?>

性能优化处理-》上传大小限制-》修改中间件Apache下的php.ini文件

   max_execution_time = 1200，Maximum execution time of each script, in seconds 脚本最大执行时间，单位是秒

  max_input_time = 1000 接收传输数据的最长时间，单位也是秒

  memory_limit = 128M 一个脚本占用内存的上限

  post_max_size = 128M post方式传输的数据最大的上限

  file_uploads = On 允许文件上传

  upload_max_filesize = 100M 上传的文件上限

  max_file_uploads = 20 一次允许上传20个文件



　　




												


											
PHP+Ajax实现文件上传功能的更多相关文章
	

    
								
  1. django项目中form表单和ajax的文件上传功能。
		
    form表单文件上传 路由 # from表单上传 path('formupload/',apply.formupload,name='formupload/'), 方法 # form表单文件上传 de ...
    
		
    2. 
						
  2. MVC5：使用Ajax和HTML5实现文件上传功能
		
    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
    
		
    3. 
						
  3. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
		
     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
    
		
    4. 
						
  4. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
		
    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
    
		
    5. 
						
  5. 7 款基于 JavaScript/AJAX 的文件上传插件
		
    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...
    
		
    6. 
						
  6. jQuery的ajax实现文件上传大小限制
		
    用jquery的ajax实现简单的文件上传功能,并且限制文件大小,先上代码. <!DOCTYPE html> <html> <head> <meta char ...
    
		
    7. 
						
  7. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
		
    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
    
		
    8. 
						
  8. PHPCMS_V9 模型字段添加单文件上传功能
		
    后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...
    
		
    9. 
						
  9. 配置php.ini实现PHP文件上传功能
		
    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 3. Port scanners （端口扫描器 4个）
			
    3. Port scanners (端口扫描器 4个) 愤怒的IP扫描器是一个小的开源Java应用程序,它执行主机发现(“ping扫描”)和端口扫描. 旧的2.x版本只有Windows,但是,新的3. ...
    
			
    2. 
						
  2. Java技术学习之影响MySQL性能的配置参数
			
    本文将介绍MySQL参数的五大类设置,平时我们一般都很少碰它们,在进行MySQL性能调优和故障诊断时这些参数还是非常有用的. (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该 ...
    
			
    3. 
						
  3. Java之Java7新特性之try资源句式
			
    一.原来写法: static String readFirstLineFromFile(String path) throws IOException { BufferedReader br = nu ...
    
			
    4. 
						
  4. SRE_ Google运维解密
			
    # 第IV部分 管理 #系统可用性时间表 # 专用术语 SLO:服务等级目标 LCE(Land-Covered Earth):紧急检修登陆艇 # 紧急事故管理 一次流程管理良好的事故 # 东西早晚要坏 ...
    
			
    5. 
						
  5. js调试工具及微博登录分析
			
    js调试工具 网页 都是采用ajax  需要提交一些参数 断点 自己去直接断点 事件断点, network 方法 靠近边栏顶部的是Call Stack(调用堆栈)窗格.当代码在断点处暂停时,Call  ...
    
			
    6. 
						
  6. 2018秋寒假作业6—PTA编程总结3
			
    1.实验代码 7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T) ...
    
			
    7. 
						
  7. okhttp 解析respone:
			
    android,retrofit,okhttp,日志拦截器,使用拦截器Interceptor统一打印请求与响应的json: https://blog.csdn.net/qq_37043246/arti ...
    
			
    8. 
						
  8. Linux文件与目录管理(学习笔记)
			
    本笔记为<鸟哥linux私房菜>第六章学习笔记 一.目录与路径 相对路径与绝对路径 绝对路径:一定由根目录 / 写起              正确度比较好 相对路径:不是由 / 写起   ...
    
			
    9. 
						
  9. tigervnc-server  无法启动问题
			
    [root@moodle-bak .X11-unix]# vncserver WARNING: The first attempt to start Xvnc failed, possibly bec ...
    
			
    10. 
						
  10. google chrome 浏览器去掉 XHR finished loading....
			
    每次Ajax请求,Chrome浏览器控制台提示如图XHR finished loading信息. 要去掉 这些信息显示 ,点击上图的Settings ,在打开的面板中取消 Log XMLHttpReq ...
    
			
    11.