php文件上传学习记录

1.多文件上传及预览功能效果：

代码分两部分：

1.index02.html

2.file_preview.php

1.index02.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>Document</title><style>*{margin:0;padding:0;}ul,ol{list-style-type:none;}.clearfix:after,.clearfix:before{display:table;content:' ';}.clearfix:after{clear:both}.tc{text-align:center;}.select,.select_video{height:2rem;line-height:2rem;background:#fff;border:1px solid #4285F4;margin:0.5rem 1rem;position:relative;}.select label,.select_video label{width:100%;position:absolute;top:0;left:0;font-size:14px;color:#333;}#upload,#upload_video{display:none;}.preview,.video_preview{margin:0.5rem 1rem;border:1px solid #bbb;padding:4px;display:none;}.preview_img_list li{float:left;width:25%;padding:2px 0;}   .preview_img_list li img{vertical-align:top;max-width:98%;}.btn{background: #4285F4;color:#fff;height:2.5rem;line-height:2.5rem;margin:2rem 1rem;border-radius:0.5rem;}</style><script>window.onload = function(){var uploadBtn = document.querySelector('#upload');var previewImgList = document.querySelector('.preview_img_list');var uploadVideo = document.querySelector('#upload_video');var submitBtn = document.querySelector('.submit');imgArr = new Array();uploadBtn.addEventListener('change',function(){var imgLen = this.files.length;var liLen = previewImgList.getElementsByTagName('li').length;var ImgLen = imgLen + liLen ;if(ImgLen > 3){alert("上传最大数量不能大于3");return false;}document.querySelector(".preview").style.display = 'block';for (var i = 0; i < imgLen;i++) {var file = this.files[i];var imgType = /^image\//;if (!imgType.test(file.type)) {continue;}var li = document.createElement('li');var img = document.createElement("img");li.appendChild(img);previewImgList.appendChild(li); var reader = new FileReader();reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; initHW(); imgArr.push(e.target.result);}; })(img);reader.readAsDataURL(file);// var objectUrl = window.URL.createObjectURL(file);// img.src = objectUrl;}},false);/*  uploadVideo.addEventListener('change',function(){var file = this.files[0];var videoType = /^video\//;if(!videoType.test(file.type)){alert("所选文件不是合法的视频文件");return false;}var pv =  document.querySelector('.video_preview');var video =  document.createElement('video');video.setAttribute('controls','controls');video.style.width = "100%";pv.appendChild(video);pv.style.display = "block";// var objectUrl = window.URL.createObjectURL(file);// video.src = objectUrl;// var reader = new FileReader();reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(video);reader.readAsDataURL(file);video.play();},false);*/submitBtn.addEventListener('click',function(){if(!imgArr.length){alert('请选择要上传的图片');return false;}var form = document.querySelector('form');var fd = new FormData(form);for(var i = 0;i < imgArr.length;i++){fd.append('file[]',imgArr[i]);}var request = new XMLHttpRequest();var url = "./file_preview.php";request.open('post',url);request.send(fd);},false);}// 初始化图片宽度// 使得图片高度一致function initHW(){var previewImgList = document.querySelector('.preview_img_list');var Lis = previewImgList.getElementsByTagName('li');var LisLen = Lis.length;if(LisLen > 1){var img = Lis[0].getElementsByTagName('img')[0];var imgW = img.width;var imgH = img.height;for(var i = 1; i < LisLen; i++){var img = Lis[i].getElementsByTagName('img')[0];img.style.width = imgW + 'px';img.style.height = imgH + 'px';}}}</script>
</head>
<body><h2 class = "tc">图片上传及预览</h2><form action="" >用户名：<input type="text" name="name"/><div class="select tc" ><label for="upload">图片上传及预览</label><input type="file" id = "upload" multiple="multiple" accpet = "image/*" capture = "camera" ></div><div class="preview"><ul class = "preview_img_list clearfix"></ul></div><div class="select_video tc"><label for="upload_video">视频上传及预览</label><input type="file" id = "upload_video" accpet = "video/*" capture = "camcorder"></div><div class="video_preview"></div><div class="submit btn tc">上传</div></form>
</body>
</html>

2.file_preview.php:

<?php
$name = $_POST['name'];
$imgCount = count($_POST['file']);
for ($i = 0; $i < $imgCount; $i++) {if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$_POST['file'][$i],$result)){$ImageType = $result[2];$res = str_replace($result[0],'',$_POST['file'][$i]);$filePath = './';$fileName = date('Y-m-d',time())."-".time().$name.'.'.$ImageType;file_put_contents($filePath.$fileName,base64_decode($res));} else {return false;}
}

2.PHP的单个文件上传、多个单文件上传、多文件上传

原文链接：点击打开链接

这里给出三种方式的统一实现

下面先给出各种方式的文件提交页面：

单个文件上传 upload1.php

[html] view plaincopy

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>单文件上传</title>
</head>
<body>
<formaction="doAction5.php"method="post"enctype="multipart/form-data">
请选择您要上传的文件：
<inputtype="file"name="myFile"/><br/>
<inputtype="submit"value="上传文件"/>
</form>
</body>
</html>

多个单文件上传 upload2.php

[html] view plaincopy

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>多个单文件上传</title>
</head>
<body>
<formaction="doAction5.php"method="post"enctype="multipart/form-data">
请选择您要上传的文件：<inputtype="file"name="myFile1"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile2"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile3"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile4"/><br/>
<inputtype="submit"value="上传文件"/>
</form>
</body>
</html>

多文件上传 upload3.php

[html] view plaincopy

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>多文件上传</title>
</head>
<body>
<formaction="doAction5.php"method="post"enctype="multipart/form-data">
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
<inputtype="submit"value="上传文件"/>
</form>
</body>
</html>

混合方式文件上传 upload4.php

[html] view plaincopy

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>混合方式文件上传</title>
</head>
<body>
<formaction="doAction5.php"method="post"enctype="multipart/form-data">
请选择您要上传的文件：<inputtype="file"name="myFile1"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile2"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"/><br/>
请选择您要上传的文件：<inputtype="file"name="myFile[]"multiple="multiple"/><br/>
<inputtype="submit"value="上传文件"/>
</form>
</body>
</html>

文件上传处理 doAction5.php

[php] view plaincopy

<?php
/**
*/
header('content-type:text/html;charset=utf-8');
include_once'upload.func.php';
$files= getFiles();
//print_r($files);
foreach($filesas$fileInfo) {
$res= uploadFile($fileInfo);
echo$res['mes'],'<br/>';
if(isset($res['dest'])) {
$uploadFiles[] =$res['dest'];
}
}
//过滤掉上传失败的文件
/**
* array_values() 函数返回一个包含给定数组中所有键值的数组，但不保留键名。
* 提示：被返回的数组将使用数值键，从 0 开始并以 1 递增。
*/
/**
* array_filter() 函数用回调函数过滤数组中的值。
* 该函数把输入数组中的每个键值传给回调函数。如果回调函数返回 true，
* 则把输入数组中的当前键值返回结果数组中。数组键名保持不变。
*/
//这里使用array_filter过滤掉数组中的空内容
if(isset($uploadFiles)) {
$uploadFiles=array_filter($uploadFiles);
print_r($uploadFiles);
}

实现文件上传的函数 upload.func.php

[php] view plaincopy

<?php
/**
*/
/**
* 构建上传文件信息
* @return mixed
*/
functiongetFiles() {
$i= 0;
foreach($_FILESas$file) {
//单文件或者多个单文件上传
if(is_string($file['name'])) {
$files[$i] =$file;
$i++;
} //多文件上传
elseif(is_array($file['name'])) {
foreach($file['name']as$key=>$val) {
$files[$i]['name'] =$file['name'][$key];
$files[$i]['type'] =$file['type'][$key];
$files[$i]['tmp_name'] =$file['tmp_name'][$key];
$files[$i]['error'] =$file['error'][$key];
$files[$i]['size'] =$file['size'][$key];
$i++;
}
}
}
return$files;
}
/**
* 获取文件扩展名
*/
functiongetExt($filename) {
returnstrtolower(pathinfo($filename,PATHINFO_EXTENSION));
}
/**
* 获取唯一字符串
*/
functiongetUniName() {
returnmd5(uniqid(microtime(true), true));
}
/**
* 针对于单文件、多个单文件、多文件的上传
* @param array $fileInfo
* @param string $path
* @param bool $flag
* @param int $maxSize
* @param array $allowExt
* @return array
*/
functionuploadFile($fileInfo,$path='./uploads',$flag=true,$maxSize=1048576,$allowExt=array('jpeg','jpg','gif','png')) {
//$allowExt = array('jpeg','jpg','gif','png');
//$flag = true;
//$maxSize = 1048576; //1M
$res=array();
//判断错误号
if($fileInfo['error'] == UPLOAD_ERR_OK) {
//检测上传文件的大小
if($fileInfo['size'] >$maxSize) {
$res['mes'] =$fileInfo['name'] .'上传文件过大';
}
$ext= getExt($fileInfo['name']);
//检测上传文件的文件类型
if(!in_array($ext,$allowExt)) {
$res['mes'] =$fileInfo['name'] .'非法文件类型';
}
//检测是否是真是的图片类型
if($flag) {
if(!getimagesize($fileInfo['tmp_name'])) {
$res['mes'] =$fileInfo['name'] .'不是真实图片类型';
}
}
//检测文件是否是通过HTTP POST上传上来的
if(!is_uploaded_file($fileInfo['tmp_name'])) {
$res['mes'] =$fileInfo['name'] .'文件不是通过HTTP POST方式上传上来的';
}
if($res)return$res;
//$path = './uploads';
if(!file_exists($path)) {
mkdir($path, 0777, true);
chmod($path, 0777);
}
$uniName= getUniName();
$destination=$path.'/'.$uniName.'.'.$ext;
if(!move_uploaded_file($fileInfo['tmp_name'],$destination)) {
$res['mes'] =$fileInfo['name'] .'文件移动失败';
}
$res['mes'] =$fileInfo['name'] .'上传成功';
$res['dest'] =$destination;
return$res;
} else{
//匹配错误信息
switch($fileInfo['error']) {
case1:
$res['mes'] ='上传文件超过了PHP配置文件中upload_max_filesize选项的值';
break;
case2:
$res['mes'] ='超过了表单MAX_FILE_SIZE限制的大小';
break;
case3:
$res['mes'] ='文件部分被上传';
break;
case4:
$res['mes'] ='没有选择上传文件';
break;
case6:
$res['mes'] ='没有找到临时目录';
break;
case7:
case8:
$res['mes'] ='系统错误';
break;
}
return$res;
}
}

php的web开发中关于上传文件的几种方法的总结

在php的web开发中，文件，图片，视频的上传是一个经常要用到的功能，而且涉及的知识面比较广，下面从几个不同的角度和技术层面来做一个详细的说明和总结。

注意：

在总结之前，请大家务必了解php.ini中的几个关于上传的关键配置值。

1.file_uploads
设为On，允许通过HTTP上传文件
2.upload_tmp_dir
文件上传至服务器时用于临时存储的目录，如果没指定，系统会使用默认的临时文件夹（我的机器是/tmp）。

3.upload_max_filesize
允许上传文件大小的最大值，默认为2M。

4.post_max_size
Php可接收的post数据的最大值（包括表单里的所有值的总合），默认为8M。
5.memory_limit
每个php所最占的最大内存数，这个值要大于允许上传的文件大小。

6.max_execution_time
每个php运行的最长时间（秒），默认30秒。

7.max_input_time
Php解析POST/GET数据的最长时间（秒），默认60秒。This sets the maximum time in seconds a scripts is allowed to parse input data, like POST and GET.It is measured from the mement of receiving all data on the server to the start of script execution.

其中很重要的是upload_max_filesize 和post_max_size 、memory_limit 必须要按照上传的文件设置合适，否则无法上传。

一、传统的php写的上传类。

写一个php的上传类，这个方法用到的知识全部是php的，而且技术的难点也不多。

<input type="hidden" name="MAX_FILE_SIZE" value="2000000">//隐藏域。这里name必须设置成MAX_FILE_SIZE，其值就是上传文件的最大长度，单位是B，这里我限制成2M
  <input name="file" type="file" value="浏览" >
< input type="submit" value="上传" name="B1">
   </table>
</form>

服务端利用php的$_FILES['file']['name']来获取文件后缀名，具体的代码自己查找资料看看，这里就不多说了。

总结;这个方法可以用来上传小于2M的文件或者是图片，基本的功能可以实现。

二、利用uploadify插件

这个是利用Jquery的上传插件，上传可以带进度条，容易配置。

官网：http://www.uploadify.com/，可以下载资料和文档，里面的各个参数的详解都很清楚，而且还有php的demo，参考一下就可以很快的开发。

总结：可以上传一些大文件，和图片，而且带进度条，可以多文件上传，在WEB中会经常用。

三、利用百度的webupload

WebUploader 是由 Baidu FEX 团队开发的一款以HTML5为主，FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势，同时又不摒弃主流IE浏览器，沿用原来的 FLASH 运行时，兼容 IE6+，iOS 6+, android 4+。采用大文件分片并发上传，极大的提高了文件上传效率。

官网：http://fex.baidu.com/webuploader/ 同时网上也有很多的资料，不过开发起来会比较难一点，但是可以上传几个G的视频，还有上传图片可以预览，功能是非常强大的，只是开发的难度稍微大点。官网上也有demo，大家可以看看，试试。

四、swfupload的插件

这是一个jquery的上传插件，功能也非常强大，开发也比较容易，网上有很多的资料，大家可以自行查找。

总结：在web的开发中，本人建议可以使用uploadify和webupload这两个，真的很好用。

原文链接：点击打开链接

[php] 3个多文件上传(uploadify、file upload、 webuploader)

多文件上传的插件常用的有：

1、jquery uploadify 下载【http://www.uploadify.com/download/】

2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】

3、webuploader 下载【http://fex.baidu.com/webuploader/download.html】

注：

在使用的时候，要参照官网的文档说明，如果看不明白，可以百度一下想知道的，必境我这里只是入门的小实例

一、jquery uploadify

该插件已经把文件写好了（index.php和uploadify.php），下载后改下上传路径就行了，这里没什么要讲的

二、jquery file upload 以Thinkphp为例 Home模块下的Index控制器

布局文件index.html：

<!doctype html>
<htmllang="zh-cn">
<head><metacharset="UTF-8"><title>文件上传</title><linkrel="stylesheet"href="__PUBLIC__/bootstrap/bootstrap.min.css"/><scriptsrc="__PUBLIC__/jquery.min.js"></script><linkrel="stylesheet"href="__PUBLIC__/jqupload/css/jquery.fileupload.css"><linkrel="stylesheet"href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css"><scriptsrc="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script><scriptsrc="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script><scriptsrc="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body><divclass="container"><divclass="row fileupload-buttonbar"style="padding-left:15px;"><divclass="thumbnail col-sm-6"><divclass="progress progress-striped active"role="progressbar"aria-valuemin="10"aria-valuemax="100"aria-valuenow="0"><divid="weixin_progress"class="progress-bar progress-bar-success"style="width:0%;"></div></div><divclass="caption"align="center"><spanid="weixin_upload"class="btn btn-primary fileinput-button"><span>上传</span><inputtype="file"id="weixin_image"name="weixin_image[]"data-url="__CONTROLLER__/uploadImg"multiple></span></div></div></div></div><script>$(function() {$("#weixin_image").fileupload({dataType:'json',acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,  //文件上传类型sequentialUploads: true,  //连续上传配置add: function(e, data) {//提交到服务器端data.submit();}}).bind('fileuploadprogress', function(e, data) {  //绑定上传进度varprogress=parseInt(data.loaded /data.total *100, 10);$("#weixin_progress").css('width',progress+'%');$("#weixin_progress").html(progress+'%');}).bind('fileuploaddone', function(e, data) {  //上传完成处理$("#weixin_upload").css({display:"none"});$('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="图片" data-holder-rendered="true">');});});</script>
</body>
</html>

Index控制器下的uploadImg方法

/*文件上传处理*/public functionuploadImg(){$upload = new\Think\Upload();//实例化上传类$upload->maxSize   =3145728;//设置附件上传大小//$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');//设置附件上传类型$upload->rootPath  ='./Public/Uploads/'; //设置附件上传根目录$upload->savePath  =''; //设置附件上传（子）目录$upload->autoSub = false;  //关闭子目录//上传文件$info   =$upload->upload();if(!$info) {//上传错误提示错误信息$this->error($upload->getError());}else{//上传成功 获取上传文件信息$pathArr = array();foreach($info as$file){array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);}echojson_encode($pathArr);}
}

三、webuploader (也是以Thinkphp为例) 可以多文件多图片大文件上传

HTML布局：

<!DOCTYPE html>
<html>
<headlang="en"><metacharset="UTF-8"><title>webuploader</title><linkrel="stylesheet"href="__PUBLIC__/webuploader/webuploader.css"/><scriptsrc="__PUBLIC__/jquery.min.js"></script><scriptsrc="__PUBLIC__/webuploader/webuploader.js"></script><style>*{padding: 0;margin: 0;}.progress{position: absolute;top: 0;left: 0;width: 100px;height: 15px;font-size: 12px;color: #fff;text-align: center;line-height: 15px;}.uploader-list.file-item{position: relative;}.progressspan{display: inline-block;height: 100%;background: #1C9F09;}</style>
</head>
<body>
<divid="uploader-demo"><!--用来存放item--><divid="fileList"class="uploader-list"></div><divid="filePicker">选择图片</div>
</div>
</body>
</html>

JS脚本：

<script>//图片上传demojQuery(function() {var$=jQuery,$list=$('#fileList'),//优化retina,在retina下这个值是2ratio=window.devicePixelRatio ||1,//缩略图大小thumbnailWidth=100*ratio,thumbnailHeight=100*ratio,// Web Uploader实例uploader;//初始化Web Uploaderuploader=WebUploader.create({//自动上传。auto: true,// swf文件路径swf:'__PUBLIC__/webuploader/Uploader.swf',//文件接收服务端。server:'__CONTROLLER__/webuploader',//选择文件的按钮。可选。//内部根据当前运行是创建，可能是input元素，也可能是flash.pick:'#filePicker',//只允许选择文件，可选。accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}});//当有文件添加进来的时候uploader.on( 'fileQueued', function( file) {var$li=$('<div id="'+file.id+'" class="file-item thumbnail">'+'<img>'+'<div class="info">'+file.name+'</div>'+'</div>'),$img=$li.find('img');$list.append( $li);//创建缩略图uploader.makeThumb( file, function( error, src) {if( error) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src);}, thumbnailWidth, thumbnailHeight);});//文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage) {var$li=$( '#'+file.id),$percent=$li.find('.progress span');//避免重复创建if( !$percent.length) {$percent=$('<p class="progress"><span></span></p>').appendTo( $li).find('span');}$percent.css( 'width', percentage*100+'%').text(percentage*100+'%');});//文件上传成功，给item添加成功class,用样式标记上传成功。uploader.on( 'uploadSuccess', function( file) {console.log(file);$( '#'+file.id).addClass('upload-state-done');});//文件上传失败，现实上传出错。uploader.on( 'uploadError', function( file) {var$li=$( '#'+file.id),$error=$li.find('div.error');//避免重复创建if( !$error.length) {$error=$('<div class="error"></div>').appendTo( $li);}$error.text('上传失败');});//完成上传完了，成功或者失败，先删除进度条。uploader.on( 'uploadComplete', function( file) {
//            $( '#'+file.id ).find('.progress').remove();});});
</script>

PHP代码：

public functionwebuploader() {$upload = new\Think\Upload();//实例化上传类$upload->maxSize   =3145728;//设置附件上传大小$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');//设置附件上传类型$upload->rootPath  ='./Public/Uploads/'; //设置附件上传根目录$upload->savePath  =''; //设置附件上传（子）目录$upload->autoSub = false;  //关闭子目录//上传文件$info   =$upload->upload();if(!$info) {//上传错误提示错误信息$this->error($upload->getError());}else{//上传成功 获取上传文件信息$pathArr = array();foreach($info as$file){array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);}echojson_encode($pathArr);}
}

原文链接：点击打开链接

PHP百度diyUpload多图上传插件实例

在开发过程中经常需要用到多图上传的插件，最近发现前端找的这个diyUpload就不错，于是就整理了一个实例，仅供参考！

使用该插件，首先需要引入必要的css和js:

然后在需要用到该插件的地方，加入一个div：

接着把调用的js写上：

},
error : function(err) {
console.info(err);
}
});
</script>

就这三步就可以上传图片了，最后就是服务端的文件上传处理了。fileupload.php 就是图片上传的处理文件，根据自己的业务逻辑把临时文件夹的图片保存到自己的网站目录。

（注：这个多图上传的服务端处理文件是每个图片上传后都会被调用一次的。）

例子源码地址：http://pan.baidu.com/s/1crH3EA

原文链接：点击打开链接