使用php完成常见的文件上传功能(推荐)


Posted in PHP onJanuary 13, 2017

文件上传现在都是很常见的了,可以上传文件,上传头像等,不同的浏览器“文件上传”有不同的效果

先看下火狐浏览器的效果是这样的:

使用php完成常见的文件上传功能(推荐)

再看下IE浏览器是这样的:

使用php完成常见的文件上传功能(推荐)

还有很多其他的浏览器,就不一一的查看效果了,那么这个上传是怎么实现的呢?

一、文件上传功能

(1)第一是要有这个上传页面了

首先是要写表单元素了(其中就有处理页面“关于上传的处理了,其中有些规则可以写”,还有传输方式,再就是一个重要的属性,因为是文件上传,所以要有这个属性:enctype="multipart/form-data")再就是关于按钮了,表单决定之后,就是里面的内容,文件上传自然按钮的类型是“file”;然后就是“上传”按钮了,这个要用到提交,所以按钮类型要用“submit”的,代码如下:

<form action="wenjiansccl.php" method="post" enctype="multipart/form-data">  <!--处理页面起个名字,做文件上传是这个属性:enctype="multipart/form-data"-->
<input type="file" name="file"/> //浏览文件的按钮
<input type="submit" value="上传" /> //提交的上传按钮
</form>

先看下效果:

使用php完成常见的文件上传功能(推荐)

(2)第二就是重要的文件上传的处理页面了

我们可以先上传值输出下,看下文件上传之后会出现什么东西,注意的是:文件的传值方式,这里不能用post或是get了,要用$_FILES[""]这个传值方式

var_dump($_FILES["file"]);  //输出传过来的值

输出结果如图:

使用php完成常见的文件上传功能(推荐)

注意:因为下面会用到这张图中的信息,在这个我先起个名字(array),便于下面用到时讲述不清楚

不难看出数个二维数组:其中有文件的名称,类型,保存位置,错误信息和文件的大小,这样其实文件就会临时的保存在服务器上了

上传文件时有4项注意项:

1.控制上传文件的类型

2.控制上传文件的大小

3.防止文件名重复

3.1修改保存的文件名

  

3.11用户名+时间戳+随机数+文件名

   

3.12流水号

3.2使用文件夹

 

  3.21public/lch/2017-2-12/1.jpg

4.保存文件

知道了这四项注意项(也相当于步骤),那么就开始一步一步的写处理页面就可以了

(1)在输出时,可以看到不是有一项是“错误”项嘛,首先可以判断下是否传输有误

if($_FILES["file"]["error"]) //将文件传值到处理页面,找到出错的索引,也就是(array)图中的错误项error
{
  echo $_FILES["file"]["error"];
}

(2)上面是如果出错就输出出错信息,没有错就是进行下面的内容了:按照注意事项开始写吧

首先是:控制文件上传时的类型和大小(也是从(array)图中找到类型type和大小size,然后将它们赋想要的类型值就可以了)我们限定了jpeg和png这两种,也可是多种,用“或”写上就可以了。这里也用个if语句判断下(如果文件类型是jpeg或是png并且文件大小是小于1024000的就可以上传,否则就是上传失败)

if($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png" && $_FILES["file"]["size"]<1024000)
{<br>//注意事项3和4的内容<br>}
else
{
echo "文件类型不正确!"; 
}

(3)在代码中的注释(注意事项3和4的内容)处开始写文件的避免重复和保存

第一:找到文件的保存位置(想要保存在哪个位置),然后拼接上修改文件名的方式(使用时间戳方式)

$filesname = "./files/".date("YmdHis").$_FILES["file"]["name"]; //$_FILES["file"]["name"]这也同样的也是(array)图的名称name

第二:判断文件是否存在(存在就提示,不存在就保存到文件夹中)

if(file_exists($filesname)) //file_exists()方法:判断文件是否存在,里面的值就是定义的保存位置
{
echo "文件已经存在"; //存在给出提示
}
else
{
//不存在就,保存文件(move_uploaded_file()保存)
move_uploaded_file($_FILES["file"]["tmp_name"],$filesname);  //里面的值要有当前的保存位置,将要保存到哪的位置
}
<span style="font-family: 宋体; font-size: 15px"><span style="font-size: 18px">注意:</span><br>1.可能上传的时候是UTF-8的编码格式,Windows是用的国标的编码格式,上传上汉子可能成为乱码了,可以在文件保存位置下面加上“转换编码格式”<br>使用的是:</span><span style="font-size: 15px">iconv()方法:</span><span style="font-size: 15px">里面有3个值,一是现在使用的编码格式,二是想要转换的编码格式,三是想要转换的字符串</span>
$filename = iconv("UTF-8","gb2312",$filesname); //这个iconv()里面有3个值,一是现在使用的编码格式,二是想要转换的编码格式,三是想要转化的字符串
<span style="font-family: 宋体; font-size: 15px">2.如果上面的文件的上传格式是篡改的格式,也用move_uploaded_file()方法</span>

到此这个文件上传就结束了,可以试一下。

二,上传文件预览

上传图片时,都会先看效果怎么样,然后再上传的,接下来就是图片预览功能了

(1)可以先有个文件按钮,用于选择文件

<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> //对这个按钮加一个事件

(2)用于显示的这个图片的一个div

<div id="uploadPreview"></div>

给这个div加点样式

#uploadPreview {
  width: 168px;
  height: 168px;             
  background-position: center center;
  background-size: cover;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
  display: inline-block;<br>}

看下效果:

使用php完成常见的文件上传功能(推荐)

然后就是写事件了

$("#uploadImage").on("change", function(){
  // 得到一个参考文件列表
  var files = !!this.files ? this.files : [];
  // 如果没有选择任何文件,或者没有文件读到就返回
  if (!files.length || !window.FileReader) return;
  // 只有进行选择的文件是一个形象
  if (/^image/.test( files[0].type)){
    // 创建一个新的FileReader的实例
    var reader = new FileReader();
    // 读取本地文件作为一个DataURL
    reader.readAsDataURL(files[0]);
    // 当加载时,图像数据设置为背景的div
    reader.onloadend = function(){
    $("#uploadPreview").css("background-image", "url("+this.result+")");
    }
  }
});

这只是一个简单的上传预览,上传到文件中的处理页面还没有写,改天补上完整的上传图片代码

看下选中图片的效果

使用php完成常见的文件上传功能(推荐)

这样,文件上传和图片预览就结束了,这两个结合一下就可以做出图片的上传了,过后我会继续补充完整的~~~

PHP 相关文章推荐
真正面向对象编程:PHP5.01发布
Oct 09 PHP
php中的观察者模式
Mar 24 PHP
按上下级层次关系输出内容的PHP代码
Jul 17 PHP
php动态实现表格跨行跨列实现代码
Nov 06 PHP
PHP实现的英文名字全拼随机排号脚本
Jul 04 PHP
推荐一款MAC OS X 下php集成开发环境mamp
Nov 08 PHP
PHP冒泡算法详解(递归实现)
Nov 10 PHP
浅谈PHP解析URL函数parse_url和parse_str
Nov 11 PHP
PHP扩展Memcache分布式部署方案
Dec 06 PHP
PHP实现批量检测网站是否能够正常打开的方法
Aug 23 PHP
PHP实现基于3DES算法加密解密字符串示例
Aug 24 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
Aug 27 PHP
Yii2实现增删改查后留在当前页的方法详解
Jan 13 #PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
Jan 12 #PHP
php中分页及SqlHelper类用法实例
Jan 12 #PHP
PHP生成图片验证码功能示例
Jan 12 #PHP
PHP中字符串长度的截取用法示例
Jan 12 #PHP
PHP实现二维数组去重功能示例
Jan 12 #PHP
PHP生成图片缩略图类示例
Jan 12 #PHP
You might like
php数组一对一替换实现代码
2012/08/31 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
如何打开php的gd2库
2017/02/09 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Python实现文件复制删除
2016/04/19 Python
详解python中sort排序使用
2019/03/23 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
从python读取sql的实例方法
2020/07/21 Python
python输入中文的实例方法
2020/09/14 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
应届生简历中的自我评价
2014/01/13 职场文书
公益活动邀请函
2014/02/05 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
中秋晚会策划方案
2014/06/12 职场文书
品质标语大全
2014/06/21 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
卖房协议书样本
2014/10/30 职场文书