前端显示界面： 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. gtest 三种事件机制
			
    前言: 1.首先说明gtest中事件的结构层次: 测试程序:一个测试程序只有一个main函数,也可以说是一个可执行程序是一个测试程序.该级别的事件机制会在程序的开始和结束执行. 测试套件:代表一个测试 ...
    
			
    2. 
						
  2. C++——STL内存清除
			
    1.vector元素的清除 看代码.在vector中添加若干元素,然后clear() #include<iostream> #include<list> #include< ...
    
			
    3. 
						
  3. nexus  数据库备份任务webhook 通知-另外一种方法
			
    使用benthos 做为webhook,是一种方法,功能很强大,但是有点复杂,所以换了一个更简单直接的webhook 工具 根据请求的数据,只处理关于db exporter 任务部分的消息,然后就是调 ...
    
			
    4. 
						
  4. Java高级特性 第13节 解析XML文档(1) - DOM和XPath技术
			
    一.使用DOM解析XML文档 DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树 ...
    
			
    5. 
						
  5. Linux系统时间的设置
			
    1. Linux系统时间的设置 在Linux中设置系统时间,可以用date命令: //查看时间[root@node1 ~]# dateTue Feb 25 20:15:18 CST 2014//修改时 ...
    
			
    6. 
						
  6. CRMEB提示：系统错误 lnterface SessionUpdateTimestampHandlerlnterface not found
			
    安装CRMEB系统时,公众号网页提示:系统错误 lnterface SessionUpdateTimestampHandlerlnterface not found 怎么办? 解决方法:PHP更换为7 ...
    
			
    7. 
						
  7. tensorboard  OSError:[Errno 22] Invalid argument
			
    哈哈 问题解决了.感谢大佬 Bill.Z 附上原文链接:https://blog.csdn.net/u013244846/article/details/88380860 解决方法:更改manager ...
    
			
    8. 
						
  8. UEditor富文本简单使用
			
    简单使用编辑器UEditor(录入)步骤: 1,下载Ueditor插件(文中使用1.4.3版本),添加js引用. <script src="../js/ueditor/ueditor. ...
    
			
    9. 
						
  9. 一些常用的js循环，如for
			
    https://blog.csdn.net/u014399368/article/details/82862444
    
			
    10. 
						
  10. kafka性能调优(转)
			
    原文  https://blog.csdn.net/weixin_39478115/article/details/79155287 Broker参数配置 1.网络和io操作线程配置优化 # brok ...
    
			
    11.