带进度条的HTML5上传文件（使用XMLHttpRequest对象）

最新推荐文章于 2024-08-27 11:22:49 发布

pgmsoul

最新推荐文章于 2024-08-27 11:22:49 发布

阅读量1.4w

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/pgmsoul/article/details/8271923

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

新标准的XMLHttpRequest支持上传文件，但是不支持html5的浏览器不行

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Upload Files using XMLHttpRequest - Minimal</title>

    <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 fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "test2.php");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
      <label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileSelected();"/>
    </div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" οnclick="uploadFile()" value="Upload" />
    </div>
<div id="progressNumber"></div>
</form>
</body>
</html>

php文件

  
<?PHP //upload.php
	//error_reporting(E_ALL);
	header("content=text/html; charset=utf-8");
	$uf = $_FILES['fileToUpload'];
	if(!$uf){
		echo "no fileToUpload index";
		exit();
	}
	$upload_file_temp = $uf['tmp_name'];  
	$upload_file_name = $uf['name'];  
	 
	if(!$upload_file_temp){
		echo "上传失败";
		exit();
	}
	$file_size_max = 1024*1024;// 1M限制文件上传最大容量(bytes)  
	// 检查文件大小  
	if ($upload_file_size > $file_size_max) {  
		echo "对不起，你的文件容量超出允许范围：".$file_size_max;  
		exit();  
	}  
	$store_dir = "./upload/";// 上传文件的储存位置  
	$accept_overwrite = 0;//是否允许覆盖相同文件  
	$file_path = $store_dir . $upload_file_name; 
	// 检查读写文件  
	if (file_exists($file_path) && !$accept_overwrite) {  
		echo "存在相同文件名的文件";  
		exit();  
	}  
	 
	//复制文件到指定目录  
	if (!move_uploaded_file($upload_file_temp,$file_path)) {  
		echo "复制文件失败".$upload_file_temp." to ". $file_path;  
		exit;  
	}  
	 
	Echo "<p>你上传了文件:";  
	echo $upload_file_name;  
	echo "<br>";  
	//客户端机器文件的原名称。   
	 
	Echo "文件的 MIME 类型为:";  
	echo $uf['type'];  
	//文件的 MIME 类型，需要浏览器提供该信息的支持，例如“image/gif”。   
	echo "<br>";  
	 
	Echo "上传文件大小:";  
	echo $uf['size'];  
	//已上传文件的大小，单位为字节。   
	echo "<br>";  
	 
	Echo "文件上传后被临时储存为:";  
	echo $uf['tmp_name'];  
	//文件被上传后在服务端储存的临时文件名。   
	echo "<br>";  	 
	 
	$error = $uf['error'];  
	switch($error){  
	case 0:  
		Echo "上传成功"; break;  
	case 1:  
		Echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值."; break;  
	case 2:  
		Echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。";break;  
	case 3:  
		Echo "文件只有部分被上传";break;  
	case 4:  
		Echo "没有文件被上传";break;  
	}  
?>