php 文件上传 (html5 flash 进度条 XXXXXX)

╰+哭是因爲堅強的太久メ 2022-05-11 09:12 217阅读 0赞

php 最简单的一个上传

php文件上传是非常简单的啦,在html页面有一个表单,form标签有一个属性设置成enctype="multipart/form-data"

<input>标签的 type="file" 属性规定了应该把输入作为文件来处理。举例来说，当在浏览器中预览时，会看到输入框旁边有一个浏览按钮。-data"

[这个例子的下载地址][Link 1]

html的部分

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    
    <body>
    <form action="upload_file.php" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file"/> 
    <br />
    <input type="submit" name="submit" value="Submit" />
    </form>
    </body>
    </html>

php地方也很简单通过使用 PHP 的全局数组 $\_FILES，你可以从客户计算机向远程服务器上传文件。

*  $\_FILES\["file"\]\["name"\] - 被上传文件的名称
 *  $\_FILES\["file"\]\["type"\] - 被上传文件的类型
 *  $\_FILES\["file"\]\["size"\] - 被上传文件的大小，以字节计
 *  $\_FILES\["file"\]\["tmp\_name"\] - 存储在服务器的文件的临时副本的名称
 *  $\_FILES\["file"\]\["error"\] - 由文件上传导致的错误代码

还有一个东西move\_uploaded\_file 可以讲上传文件移动到某个目录下面,因为php会把上传的文件放到一个临时的文件里面,所以要把文件移动到制定的文件夹

php代码

<?php
    
    if ($_FILES["file"]["error"] > 0)
    {
    	echo "Error: " . $_FILES["file"]["error"] . "<br />";
    }
    else
    {
    	echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    	echo "Type: " . $_FILES["file"]["type"] . "<br />";
    	echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    	echo "Stored in: " . $_FILES["file"]["tmp_name"];
        move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
    }
    
    ?>

这是最简单的了 有跳转  刷新页面 ,没有进度条  没有文件的判断  什么都没有

php 无刷新的一个上传(iframe)

然后既然是上传,肯定会对上传文件的大小有限制,在php.ini里面 upload\_max\_filesize = 30M 这里可以限制上传文件的大小, post\_max\_size = 33M可以设置post的最大的数据

有时候希望上传的是不刷新,可以借助iframe,将form的target指向iframe的name;这个就不会刷新了,如何知道上传文成了??可以这样做,因为执行的php在iframe里面执行的,就可以放回一段js代码比如"<script>top.upCallback(\{valid:1,message:'成功了'\})</script>" 它调用父页面的全局函数upCallback,所以在上传页面定义个upCallback做为上传完成的回调

[下载地址][Link 2]

html部分

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    
    <body>
    <iframe name="upframe"></iframe>
    <form action="upload_file.php" method="post" enctype="multipart/form-data" target="upframe">
    <label for="file">Filename:</label>
    <input type="file" name="file"/> 
    <br />
    <input type="submit" name="submit" value="Submit" />
    </form>
    </body>
    <script>
    function upCallback(obj){
    	if(!obj)
    		return;
    	if(obj.valid==1){
    		alert(obj.message);
    	}else{
    		alert("失败");
    	}
    }
    </script>
    </html>

php部分

<?php
    
    if ($_FILES["file"]["error"] > 0)
    {
    	echo "<script>top.upCallback({valid:0})</script>" ;
    }
    else
    {
        $is = move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
    	if($is){
    		echo "<script>top.upCallback({valid:1,message:'成功了'})</script>" ;
    	}else{
    		echo "<script>top.upCallback({valid:0})</script>" ;
    	}
    }
    
    ?>

php 借助html5上传(进度条 无刷新 ajax提交数据  可惜了ie不支持 )

在表单元素里面还是<input type="file"> 在高级点的浏览器里面都支持input.files(它是以个数组,里面可以保存选择的文件的相关信息,比如文件大小,文件类型 ) 这个东西是html5的api哟[files的介绍这里有点][files] 　　[html5 file api 介绍这里有点][html5 file api] 其实我找到的介绍都不是很仔细,还是要自己动手多试

另外一个比较强大的东西就 xhr了,就是就是ajax提交的那个东西(html5上传是ajax提交的). html5可以给xhr绑定事件了,比如progress(可以看上传了多少), abort(中断) load(上传完成了)[一些xhr相关东西的介绍][xhr]　　　[一些xhr相关东西的介绍][xhr 1] 找了一下 还真没找到介绍的比较详细的xhr新属性的东西

既然是ajax提交,要上传的东西怎么取到了,都知道xhr发送数据到服务端是通过send方法,参数传数据 比如xhr.send(data),data就是数据了.  
html5上传要到一个新对象FormData [ FormData介绍][FormData] var fd = new FormData(document.getElementById('form1')); 就可以格式化数据了

在php端就是取值的时候

我测试了几次  返现取出根据不同的浏览器有关

在ff中  用$\_FILES\["fileToUpload"\]     fileToUpload是input的name

还在chrome中 用$\_FILES\["Filedata"\]  取值

在 Safari中发现  $\_FILES\["Filedata"\]    $\_FILES\["fileToUpload"\]都能娶到值  哎

取的是$\_FILES\["fileToUpload"\]而不是$\_FILES\["file"\];  
xhr绑定的是load是上传完成了, 但是服务端还要处理相关的东西,所以最后的回调还是要写在xhr.onreadystatechange里面找服务器处理完后来写回调(因为有可能上传成功了,但是转移目录,或者操作数据库,或者其他n多种情况失败了)

[ 下载地址][Link 3]

html部分

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
    <style type="text/css">
    #progress{ height:20px; border:1px solid #CCC; width:100px; display:none;}
    #bar{ width:0; height:20px; background-color:#900;}
    </style>
    <form id="form1" enctype="multipart/form-data" method="post" action="uu.php">
        <div class="row">
          <label for="fileToUpload">Select a File to Upload</label><br />
          <input type="file" name="fileToUpload" id="fileToUpload" onChange="fileSelected();"/>
        </div>
        <div class="row">
          <input type="button" onClick="uploadFile()" value="Upload" />
        </div>
        <table width="310" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td width="100"> <div id="progress"><div id="bar"></div></div></td>
            <td><div id="b"></div></td>
            </tr>
        </table>
       
        <div id="fileName"></div>
        <div id="fileSize"></div>
        <div id="fileType"></div>    
        
    </form>
    <script type="text/javascript">
    
    function fileSelected() {
    	var file = document.getElementById('fileToUpload').files[0];
    	if (file) {
    		var fileSize = 0;
    		if (file.size>1024 * 1024)
    		  fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    		else
    		  fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    			   
    		document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    		document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
    		document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
    	}
    }
    function uploadFile() {
    	var xhr = new XMLHttpRequest();
    
    	var fd = new FormData(document.getElementById('form1'));
    	
    	xhr.upload.addEventListener("progress", uploadProgress, false);
    
    	xhr.addEventListener("load", uploadComplete, false); 
    	xhr.addEventListener("error", uploadFailed, false); 
    	xhr.addEventListener("abort", uploadCanceled, false);
    	
    
    	xhr.onreadystatechange = function(){
          if(xhr.readyState==4){
    			if((xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ) //返回码两百内表示陈宫了 304表示告诉浏览器读缓存
             	var o  = eval("("+xhr.responseText+")");
    			if(o.valid == 1){
    				uploadComplete();
    				alert("上传成功...");
    			}
            }
    	}
    
    	xhr.open("POST", "upload.php"); 
    	xhr.send(fd); 
    }
    
    function uploadProgress(e){
    	var progress = document.getElementById("progress");
    	progress.style.display = "block";
    	var bar = document.getElementById("bar");
    	var b   = document.getElementById("b");
    	if(e.lengthComputable){
    		var c = parseInt(((e.loaded)/(e.total))*10000)/10000;
    		bar.style.width = parseInt(c*100)+"px";
    		b.innerHTML = c*100+"%";
    	}
    }
    
    function uploadComplete(e){
    	document.getElementById("progress").style.display = "block";
    	bar.style.width ="100px";
    	b.innerHTML = "100% upadate ok";
    }
    
    function uploadFailed(){
    
    }
    
    function uploadCanceled(){
    
    }
    </script>
    </body>
    </html>

php部分

<?php
    /*
    print_r($_FILES);
    Array
    (
        [fileToUpload] => Array
            (
                [name] => demo.htm
                [type] => text/html
                [tmp_name] => C:\wamp\tmp\php4F1.tmp
                [error] => 0
                [size] => 29313
            )
    
    )
    */
    
    if ($_FILES["fileToUpload"]["error"] > 0)
    {
    	echo "{valid : 0 , message:'失败了'}" ;
    }
    else
    {
        $is = move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],"upload/" . $_FILES["fileToUpload"]["name"]);
    	if($is){
    		echo "{valid : 1 , message:'成功了'}" ;
    	}else{
    		echo "{valid : 0 , message:'上传成功 转移目录失败了 '}" ;
    	}
    }	
    ?>

php flash 上传 (主要场景是ie下面)

没啥好说的  懂as就行

php html5 flash 上传文件（终版）

做了几天上传的测试 发现

upload\_max\_filesize  upload\_max\_filesize都做了上限限制  但是还是可能传文件传不上去

这是可以看看是不是 memory\_limit的问题    把它设置大点也许就解决了

[下载地址][Link 4]

部分html js代码

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <style>
    #c{ text-align:left; font-size:12px;}
    #c div.btn{ width:90px; height:30px; border:1px solid #9C9C9B; background:url(btn.gif) 0 0 no-repeat;}
    #c div.btn:hover{ background:url(btn.gif) 0 -30px no-repeat}
    #c .file{width:90px; height:30px; opacity:0; cursor:pointer;}
    #c .bar{
    	width:350px; display:none;  padding:0 5px 5px; background:#FFFFE1;  border:1px solid #9C9C9B; margin-top:10px;
    }
    #c .list{ overflow:hidden; margin-top:5px; position:relative}
    #c .loadbar{ width:100px; height:10px; overflow:hidden; border:1px solid #9C9C9B; float:left;  margin-right:5px;}
    #c .bai{ float:left; display:inline-block;_zoom:1;*display:inline; width:35px; margin-left:10px; }
    #c .info{float:left; height:14px; display:inline-block;_zoom:1;*display:inline; width:165px;overflow:hidden;word-break: break-all;word-wrap: break-word;}
    #c .block{ width:0; height:10px; background:#9C9C9B;}
    #c a{color:#2D5169; position:absolute; right:5px; top:0;}
    </style>
    <body>
    
    <div id="c">
    </div>
    
    <script language="javascript" type="text/javascript">
    	(function(doc){			  
    		var window = this;
    		var _extend = function(obj,o){
    			for(var name in o){
    				obj[name] = o[name];
    			}
    		}
    		var _$q = function(name,p){
    			return p.getElementsByTagName(name);				
    		}
    		var _$c = function(name,p){
    			var elem = doc.createElement(name);
    			p&&p.appendChild(elem);
    			return elem;
    		}
    
    		window.upload = {
    			options : {
    				maxSize : 35, //35m的意思
    				message : "文件不能超过{size}m"
    			},
    			init : function(options){
    				_extend(this.options,options);
    				_extend(this,this.options);
    				if(!this.elem || !this.elem.nodeName){
    					return;
    				}
    				var t = new Date().getTime();
    				var ie = doc.all,
    					self = this;
    				if(ie){
    					this.elem.innerHTML = [
    						"<object id='flash_z'  classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='90' height='30'>",
    						"<param name='FlashVars' VALUE='' />",
    						"<param name='wmode' value='transparent'/>",
    						"<param name='Movie' value='upload.swf?"+t+"' />",
    						"<param name='Src' value='upload.swf?"+t+"' />",
    						"<param name='WMode' value='Window' />",
    						"<param name='Scale' value='NoScale' />",
    						"<param name='BGColor' value='#cccccc' />",
    						"<param name='AllowNetworking' value='all' />",
    						"<param name='AllowFullScreen' value='true' />",
    						"<param name='AllowScriptAccess' value='always' />",
    						"</object><div class='bar'></div>"						
    					].join("");	
    					this.flash = this.elem.childNodes[0];
    					this.bar = this.elem.childNodes[1];
    					
    					this.flash.style.display = "none";
    					this.flashComplete = function(){
    						this.flash.style.display = "block";
    						this.flash.init(this.url+"_____"+this.maxSize);
    					}
    					
    				}else{
    					this.elem.innerHTML = '<div class="btn">\
    						<form enctype="multipart/form-data" method="post" action="'+this.url+'">\
    						<input class="file" type="file" name="fileToUpload">\
    						</form>\
    						</div><div class="bar"></div>';
    						this.bar   = this.elem.childNodes[1];
    						this.form  = _$q("form",this.elem)[0];
    						this.input = _$q("input",this.elem)[0];
    						this.input.onchange = function(){
    							self.fileSelected();
    						}
    						this.createXhr();
    				}
    				this.bar.onclick = function(e){
    					var e = window.event || e,
    						elem = e.target || e.srcElement,
    						dom = elem.getAttribute("dom");
    					if(dom == "abort"){
    						ie
    							? self.flash.abort()
    							: self.xhr.abort();						
    					}
    				}
    			},
    			creatBar : function(){
    				var list = this.list = _$c("div",this.bar);
    				list.className = "list";
    				list.innerHTML="<div class='loadbar'><div class='block'></div></div><span class='bai'></span><span class='info'></span><a dom='abort' href='javascript:;'>取消</a>"
    				this.block = _$q("div",list)[1];
    				this.a = _$q("a",list)[0];
    				var spans  = _$q("span",list); 
    				this.baiSpan  =  spans[0];
    				this.fileNameSpan = spans[1];				
    			},
    			createXhr : function(){
    				var xhr = this.xhr = new XMLHttpRequest(),
    					self = this;
    				
    				xhr.upload.addEventListener("progress", function(e){
    					if(e.lengthComputable){
    						var num = parseInt(((e.loaded)/(e.total))*10000)/10000;
    						num = num.toFixed(2);
    						self.progress(Math.min(0.99,num));
    					}
    				}, false);
    
    				xhr.addEventListener("load", function(){
    					//self.progress(1); //让进度条变满	 上传完成时候的回调函数								  	
    				}, false);
    
    				xhr.addEventListener("error", function(){
    					self.fail("上传失败");
    				}, false);
    
    				xhr.addEventListener("abort", function(){
    					self.abort();
    				}, false);
    
    				xhr.onreadystatechange = function(){
    				  if(xhr.readyState==4){
    						if((xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ){
    							try {
    								var o = eval("("+xhr.responseText+")");
    								if(o.valid == 1){
    									self.complete();
    								}else{
    									self.fail("上传失败了")
    								}	
    							} catch (e) {
    								self.fail("上传失败");
    							}							
    						}
    					}
    				}
    			},
    			abort : function(){			
    				this.list.parentNode.removeChild(this.list);
    				_$q("div",this.bar).length ==0
    					&&(this.bar.style.display = "none");				
    			},
    			complete : function(){
    				this.progress(1);
    				this.a.parentNode.removeChild(this.a);
    				this.a = null;
    			},
    			fileSelected : function(){
    				var fileInfo = this.input.files[0];
    				this.name    = fileInfo.name;
    				this.size    = fileInfo.size;				
    				if(fileInfo.size>this.maxSize*1024*1024){
    					this.fail();
    					return;
    				}
    				this.selectHander();
    				this.uploadFile();
    			},
    			uploadFile : function(){
    				this.xhr.open("POST", this.url);
    				fd = new FormData(this.form)
    				fd.append("Filedata", this.input.files[0]);
    				this.xhr.send(fd);
    			},
    			fail : function(err){
    				alert(err||this.message.replace("{size}",this.maxSize));			
    				_$q("div",this.bar).length ==0
    					&&(this.bar.style.display = "none");	
    			},
    			progress : function(val){
    				val =100*val+"";
    				if(val.length>5){
    					val.indexOf(".")>0
    						? val = val.substr(0,5)
    						: val = val.substr(0,2);
    				}
    				this.block.style.width = val+"px";
    				this.baiSpan.innerHTML = val+"%";				
    			},
    			log: function(s){
    				//alert(s) 调试flash用的
    			},
    			selectHander : function(){
    				this.creatBar();
    				this.fileNameSpan.innerHTML = this.name+"("+this.howSize(this.size)+")";
    				this.bar.style.display = "block";				
    			},
    			setValue : function(obj){
    				obj = eval("("+obj+")");
    				_extend(upload,obj);
    				upload.selectHander();				
    			},
    			howSize : function(size){
    				if(size<1024){
    					return size+"kb";
    				}else if(size<1024*1024){
    					return (size/1024).toFixed(2) + "k";
    				}else{
    					return (size/(1024*1024)).toFixed(2) + "m";
    				}
    			}
    		}
    	})(document);
    	
    	upload.init({
    		elem    : document.getElementById("c"),
    		url     : "upload.php",
    		maxSize : 30
    	});
    </script>
    
    </body>
    </html>

[Link 1]: http://download.csdn.net/download/wtcsy/4870730
[Link 2]: http://download.csdn.net/download/wtcsy/4870756
[files]: http://www.html5rocks.com/zh/tutorials/file/dndfiles
[html5 file api]: http://www.mhtml5.com/resources/html-5-file-api%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B
[xhr]: http://www.itivy.com/html5/archive/2011/12/15/html5-xmlhttprequest-usage.html
[xhr 1]: http://www.html5rocks.com/zh/tutorials/file/xhr2/
[FormData]: http://www.cnblogs.com/rubylouvre/archive/2011/04/26/2028827.html
[Link 3]: http://download.csdn.net/download/wtcsy/4873797
[Link 4]: http://download.csdn.net/download/wtcsy/4906536

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关使用PHP和Ajax实现文件上传进度条

在Web开发中，文件上传是一个常见的功能需求。当处理大型文件或者网络连接较慢时，用户可能需要了解文件上传的进度情况。本文将介绍如何使用PHP和Ajax来实现一个文件上传进度条的

爱被打了一巴掌/ 2024年02月29日 03:07/ 0 赞/ 154 阅读

相关 html资源文件记载进度条,HTML5矢量实现文件上传进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web

妖狐艹你老母/ 2022年10月05日 12:53/ 0 赞/ 252 阅读

相关 PHP上传文件进度条的实现详情

今天研究了下PHP上传文件进度条的实现方法,从网上查到的资料,实现PHP上传文件进度条提示的方法主要有三种,这三种方法分别是: 1、使用PHP的创始人 Rasmus Lerd

阳光穿透心脏的1/2处/ 2022年08月25日 15:45/ 0 赞/ 307 阅读

相关基于HTML5 Ajax实现文件上传并显示进度条

本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下效果图： ![1422392355-0.jpg_2016125165746][] h

港控/mmm°/ 2022年07月12日 13:18/ 0 赞/ 255 阅读

相关大文件上传进度条实现

大文件上传进度条实现 1.FormData对象提交表单进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数

喜欢ヅ旅行/ 2022年05月20日 06:23/ 0 赞/ 367 阅读

相关 php 文件上传 (html5 flash 进度条 XXXXXX)

php 最简单的一个上传 php文件上传是非常简单的啦,在html页面有一个表单,form标签有一个属性设置成enctype="multipart/form-data" <

╰+哭是因爲堅強的太久メ/ 2022年05月11日 09:12/ 0 赞/ 218 阅读

相关 ajax 文件上传进度条

一：方案分析基于浏览器的文件上传，为了有更好的用户体验，我们一般就设置一个旋转的图标，旋转的图标无法实时的监控文件上传情况。所以我们将实现一个如何实时的监控

旧城等待，/ 2022年04月16日 06:53/ 0 赞/ 396 阅读

相关上传文件进度条进度事件progress

在`XMLHttpRequest` 的`open`之前重写`XMLHttpRequestUpload`对象的进度事件`progress`方法，监听`progress`方法，计算

浅浅的花香味﹌/ 2021年12月04日 01:47/ 0 赞/ 556 阅读

相关 HTML 5 进度条

.pro progress{ -webkit-appearance:none; } .pro ::-webkit-progress

小鱼儿/ 2021年09月17日 01:16/ 0 赞/ 441 阅读

相关 HTML5 jQuery+FormData 异步上传文件，带进度条

[http://blog.csdn.net/michaelwubo/article/details/50865246][http_blog.csdn.net_michaelwu

布满荆棘的人生/ 2021年09月14日 20:06/ 0 赞/ 407 阅读