php+ajax上传文件或者图片（支持非ie浏览器）

最新推荐文章于 2019-08-09 10:08:00 发布

爱代码也爱家庭

最新推荐文章于 2019-08-09 10:08:00 发布

阅读量466

点赞数

分类专栏：上传文件文章标签： php ajax 上传

本文链接：https://blog.csdn.net/luckymama/article/details/53355440

版权

上传文件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、编写index.html

<!DOCTYPE html>
<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>
    <script type="text/javascript" src="js/upload.js"></script>
</head>
<body>
  <form name="form1" enctype="multipart/form-data" method="post" action="upload.php">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileUpload('fileToUpload','form1','fileid');"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div id="progressNumber"></div>
    文件路径：<input type="text" name="fileid" id="fileid" value="" />
  </form>
</body>
</html>

2、编写upload.php

<?php
	//获取文件后缀名
	function getExt($filename){
		$array = explode('.', $filename);
		$ext = array_pop($array);
		return strtolower($ext);
	}

	//随机数
	function randStr($length){
		$chars="0123456789abcdefghijklmnopqrstuvwxyz"; //字符串
		$string="";
		for($i=0;$i<$length;$i++){
			$string.=substr($chars, rand(0,strlen($chars)-1),1);
		}
		return $string;
	}
	
	function upFile(){
		$files=&$_FILES['fileToUpload'];
		//print_r($_FILES);exit;
		if(!empty($files) && !is_uploaded_file($files['tmp_name'])){
			return $this->status_data(-1,null,"未上传文件");
		}
		//print_r($this->datas);exit;

		$ext=getExt($files['name']);
		
		$imgExt=array('jpg','png','jpeg','gif');
		if(in_array($ext,$imgExt)){
			$cun='upload/picture/'.date('Y-m-d').'/';
		}else{
			$cun='upload/attach/'.date('Y-m-d').'/';
		}
		if(!is_dir($cun)){
			mkdir($cun);
		}
		
		$t=time().randStr(6);
		$file_ext=substr($files['name'],strrpos($files['name'],'.'));
		$fiename=$t.$file_ext;
		$putPath=$cun.$fiename;
		
		$rs = move_uploaded_file($files['tmp_name'],$putPath);//上传图片
		if($rs){
			echo  $_POST['fileid']."|".$putPath;
		}else{
			echo  "error";
		}
	}
	
	upFile();
	
?>

3、引用js

function fileUpload(filename,formname,fileid) {
  var file = document.getElementById(filename).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;
    var fd = new FormData(document.forms.namedItem(formname));
    fd.append("fileid", fileid);//返回时的图片显示在哪个div id里面
    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(document.forms.namedItem(formname).method, document.forms.namedItem(formname).action);
    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) {
  if(evt.target.responseText){
    var imageres = evt.target.responseText;
    var imagearr = imageres.split("|");
    var imageid = imagearr[0];
    var imageurl = imagearr[1];
    document.getElementById(imageid).value = imageurl;
  }
}

function uploadFailed(evt) {
  document.getElementById('error').innerHTML = 'Error';
}

function uploadCanceled(evt) {
  document.getElementById('abort').innerHTML = 'Canceled';
}

对ie支持不是很好，js高手可自行修改兼容。

爱代码也爱家庭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php+ajax上传文件或者图片（支持非ie浏览器）

1、编写index.html Upload Files using XMLHttpRequest - Minimal Select a File to Upload 文件路径： 2、编写upload.php<?php //获取文件后缀名 functi
复制链接

扫一扫

专栏目录