先看看完成后的页面：
前端页面：
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<title>File Upload Progress Demo</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
/*.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }*/
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<script src="../aiyiran/template/default/js/commond.js"></script>
</head>
<body>
<form action="" id="myform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1">文件名称</label>
<input type="text" id="txt2" name="file_name" class="form-control" id="exampleInputEmail1" placeholder="文件名称请输入">
</div>
<div class="form-group">
<label for="exampleInputFile">上传文件</label>
<input type="file" name="myfile[]" id="exampleInputFile" multiple="multiple">
<p class="help-block">Example block-level help text here.</p>
<!--突破预览区域-->
<div class="row" id="show" style="display: none;">
</div>
<!--进度条-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<!--<span class="percent">0%</span>-->
</div>
</div>
</div>
<button type="submit" class="btn btn-default">提交上传</button>
</form>
<div id="status"></div>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.form.min.js"></script>
<script>
$(function(){
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('#myform').ajaxForm({
url:'upload.php', //提交地址
// data:'', 设置在定义想要提交的数据
dataType: 'json',
beforeSerialize:function(){
//alert("表单数据序列化前执行的操作！");
//$("#txt2").val("java");//如：改变元素的值
},
beforeSubmit:function(){
//alert("表单提交前的操作");
var filesize = $("input[type='file']")[0].files[0].size/1024/1024;
if(filesize > 50){
alert("文件大小超过限制，最多50M");
return false;
}
//if($("#txt1").val()==""){return false;}//如：验证表单数据是否为空
},
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
bar.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {//上传的过程
//position 已上传了多少
//total 总大小
//已上传的百分数
var percentVal = percentComplete + '%';
bar.width(percentVal)
bar.html(percentVal);
//console.log(percentVal, position, total);
},
success: function(data) { //成功
var percentVal = '100%';
bar.width(percentVal); // 进度条颜色加载
bar.html(percentVal); // 进度条数字加载
setTimeout(function () { // 延迟一秒提示加载成功
// 展示上传成功的缩略图
showImg(data);
},1000);
},
error:function(err){//失败
alert("表单提交异常！"+err.msg);
},
complete: function(xhr) {//完成
status.html(xhr.responseText);
}
});
function showImg(data) {
console.log(data);
if(data.status == 1){
var str = "";
for(var i=0; i<data.data.length; i++){
str += "<div class='col-xs-6 col-md-3'>";
str += "<a href='' class='thumbnail'>";
str += "<img src='holder.js/100%x180' alt='100%x180' src=upfile/"+data.data[i]+" data-holder-rendered='true' style='height: 180px; width: 100%; display: block;' />";
str += "</a>";
str += "</div>";
}
$("#show").show();
$("#show").html('');
$("#show").html(str);
alert('上传成功');
}else{
// 进度条初始化为0
$("#show").hide();
status.empty();
var percentVal = '0%';
bar.width(percentVal)
bar.html(percentVal);
alert(data.data);
}
}
});
</script>php代码：
<?php
if($_FILES['myfile']){
include 'fileupload.php';
$up = new fileupload;
$up -> set("path",'./upfile');
$up -> set("maxsize", 2000000000);
$up -> set("allowtype", array("gif", "png", "jpg","jpeg"));
if($up -> upload("myfile")) {
// 获取上传后的文件名称
//print_r($up->getFileName()); // 这里返回的是一个数组
$data = $up->getFileName();
echo json_encode(array('status'=>1, 'data' => $data));exit();
} else {
echo json_encode(array('status'=>0, 'data' => $up->getErrorMsg()[0]));exit();
}
}php上传文件类代码：
<?php
/**
file: fileupload.class.php 文件上传类FileUpload
本类的实例对象用于处理上传文件，可以上传一个文件，也可同时处理多个文件上传
*/
class FileUpload {
private $path = "./uploads"; //上传文件保存的路径
private $allowtype = array('jpg','gif','png'); //设置限制上传文件的类型
private $maxsize = 1000000; //限制文件上传大小（字节）
private $israndname = true; //设置是否随机重命名文件， false不随机
private $originName; //源文件名
private $tmpFileName; //临时文件名
private $fileType; //文件类型(文件后缀)
private $fileSize; //文件大小
private $newFileName; //新文件名
private $errorNum = 0; //错误号
private $errorMess=""; //错误报告消息
/**
* 用于设置成员属性（$path, $allowtype,$maxsize, $israndname）
* 可以通过连贯操作一次设置多个属性值
*@param string $key 成员属性名(不区分大小写)
*@param mixed $val 为成员属性设置的值
*@return object 返回自己对象$this，可以用于连贯操作
*/
function set($key, $val){
$key = strtolower($key);
if( array_key_exists( $key, get_class_vars(get_class($this) ) ) ){
$this->setOption($key, $val);
}
return $this;
}
/**
* 调用该方法上传文件
* @param string $fileFile 上传文件的表单名称
* @return bool 如果上传成功返回数true
*/
function upload($fileField) {
$return = true;
/* 检查文件路径是滞合法 */
if( !$this->checkFilePath() ) {
$this->errorMess = $this->getError();
return false;
}
/* 将文件上传的信息取出赋给变量 */
$name = $_FILES[$fileField]['name'];
$tmp_name = $_FILES[$fileField]['tmp_name'];
$size = $_FILES[$fileField]['size'];
$error = $_FILES[$fileField]['error'];
/* 如果是多个文件上传则$file["name"]会是一个数组 */
if(is_Array($name)){
$errors=array();
/*多个文件上传则循环处理 ， 这个循环只有检查上传文件的作用，并没有真正上传 */
for($i = 0; $i < count($name); $i++){
/*设置文件信息 */
if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i] )) {
if(!$this->checkFileSize() || !$this->checkFileType()){
$errors[] = $this->getError();
$return=false;
}
}else{
$errors[] = $this->getError();
$return=false;
}
/* 如果有问题，则重新初使化属性 */
if(!$return)
$this->setFiles();
}
if($return){
/* 存放所有上传后文件名的变量数组 */
$fileNames = array();
/* 如果上传的多个文件都是合法的，则通过销魂循环向服务器上传文件 */
for($i = 0; $i < count($name); $i++){
if($this->setFiles($name[$i], $tmp_name[$i], $size[$i], $error[$i] )) {
$this->setNewFileName();
if(!$this->copyFile()){
$errors[] = $this->getError();
$return = false;
}
$fileNames[] = $this->newFileName;
}
}
$this->newFileName = $fileNames;
}
$this->errorMess = $errors;
return $return;
/*上传单个文件处理方法*/
} else {
/* 设置文件信息 */
if($this->setFiles($name,$tmp_name,$size,$error)) {
/* 上传之前先检查一下大小和类型 */
if($this->checkFileSize() && $this->checkFileType()){
/* 为上传文件设置新文件名 */
$this->setNewFileName();
/* 上传文件 返回0为成功， 小于0都为错误 */
if($this->copyFile()){
return true;
}else{
$return=false;
}
}else{
$return=false;
}
} else {
$return=false;
}
//如果$return为false, 则出错，将错误信息保存在属性errorMess中
if(!$return)
$this->errorMess=$this->getError();
return $return;
}
}
/**
* 获取上传后的文件名称
* @param void 没有参数
* @return string 上传后，新文件的名称， 如果是多文件上传返回数组
*/
public function getFileName(){
return $this->newFileName;
}
/**
* 上传失败后，调用该方法则返回，上传出错信息
* @param void 没有参数
* @return string 返回上传文件出错的信息报告，如果是多文件上传返回数组
*/
public function getErrorMsg(){
return $this->errorMess;
}
/* 设置上传出错信息 */
private function getError() {
$str = "上传文件:{$this->originName}时出错 : ";
switch ($this->errorNum) {
case 4: $str .= "没有文件被上传"; break;
case 3: $str .= "文件只有部分被上传"; break;
case 2: $str .= "上传文件的大小超过了HTML表单中MAX_FILE_SIZE选项指定的值"; break;
case 1: $str .= "上传的文件超过了php.ini中upload_max_filesize选项限制的值"; break;
case -1: $str .= "未允许类型"; break;
case -2: $str .= "文件过大,上传的文件不能超过{$this->maxsize}个字节"; break;
case -3: $str .= "上传失败"; break;
case -4: $str .= "建立存放上传文件目录失败，请重新指定上传目录"; break;
case -5: $str .= "必须指定上传文件的路径"; break;
default: $str .= "未知错误";
}
return $str;
}
/* 设置和$_FILES有关的内容 */
private function setFiles($name="", $tmp_name="", $size=0, $error=0) {
$this->setOption('errorNum', $error);
if($error)
return false;
$this->setOption('originName', $name);
$this->setOption('tmpFileName',$tmp_name);
$aryStr = explode(".", $name);
$this->setOption('fileType', strtolower($aryStr[count($aryStr)-1]));
$this->setOption('fileSize', $size);
return true;
}
/* 为单个成员属性设置值 */
private function setOption($key, $val) {
$this->$key = $val;
}
/* 设置上传后的文件名称 */
private function setNewFileName() {
if ($this->israndname) {
$this->setOption('newFileName', $this->proRandName());
} else{
$this->setOption('newFileName', $this->originName);
}
}
/* 检查上传的文件是否是合法的类型 */
private function checkFileType() {
if (in_array(strtolower($this->fileType), $this->allowtype)) {
return true;
}else {
$this->setOption('errorNum', -1);
return false;
}
}
/* 检查上传的文件是否是允许的大小 */
private function checkFileSize() {
if ($this->fileSize > $this->maxsize) {
$this->setOption('errorNum', -2);
return false;
}else{
return true;
}
}
/* 检查是否有存放上传文件的目录 */
private function checkFilePath() {
if(empty($this->path)){
$this->setOption('errorNum', -5);
return false;
}
if (!file_exists($this->path) || !is_writable($this->path)) {
if (!@mkdir($this->path, 0755)) {
$this->setOption('errorNum', -4);
return false;
}
}
return true;
}
/* 设置随机文件名 */
private function proRandName() {
$fileName = date('YmdHis')."_".rand(100,999);
return $fileName.'.'.$this->fileType;
}
/* 复制上传文件到指定的位置 */
private function copyFile() {
if(!$this->errorNum) {
$path = rtrim($this->path, '/').'/';
$path .= $this->newFileName;
if (@move_uploaded_file($this->tmpFileName, $path)) {
return true;
}else{
$this->setOption('errorNum', -3);
return false;
}
} else {
return false;
}
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
