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

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

这样看IE浏览器：

还有很多其他浏览器不一一查看结果，那么这个上传是如何实现的呢？

一、文件上传功能

(1)首先是有这个上传页面

首先要写表单元素(包括处理页面“关于上传，可以写一些规则”，还有传输方式，然后一个重要属性，因为是文件上传，所以必须有这个属性：enctype='multipart/form-data ')。然后是按钮。表单确定后，就是里面的内容，文件上传的自然按钮类型是“文件”；然后是“上传”按钮，需要提交，所以按钮类型应该是“提交”，代码如下：

表单操作=' wenjiansccl.php '方法=' post ' enctype=' multipart/form-data '！-给处理页面起个名字，上传的文件是这个属性：enctype=' multipart/form-data '-input type=' file ' name=' file '///button浏览文件输入类型=' submit ' value=' upload '///submit上传按钮/form先看效果：

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

我们可以先上传值输出，看看文件上传后会发生什么。注意：这里不能用post或get，应该用$_FILES['']。

var _ dump($ _ FILES[' FIle '])；//输出传输值。输出结果如下：

注意：因为下面会用到这张图中的信息，所以我先给一个名字(数组)，这样下面用的时候就不清楚了。

不难看出几个二维数组：有文件名、类型、存储位置、错误消息和文件大小，这样文件就会临时存储在服务器上

上传文件时有四个注意事项：

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']) //将文件值传递到处理页，发现错误索引，即(数组)图中的错误项error { echo $ _ FILES[' file '][' error ']；}(2)以上是出现错误时输出错误信息。如果没有错误，继续下面的内容：按照注意事项开始写

第一种是在上传时控制文件的类型和大小(从(数组)图中找到类型类型和大小大小就够了，然后给它们分配想要的类型值)。我们有有限的jpeg和png，但也有许多类型，所以只需用“或”来写它们。这里也用一个if语句来判断(如果文件类型是jpeg或者png，文件大小小于1024000，可以上传，否则上传失败)

if($ _ files[' file '][' type ']=' image/JPEG ' | $ _ files[' file '][' type ']=' image/png ' $ _ files[' file '][' size ']1024000){；}(3)在代码中的注释处开始编写文件(注释3和4的内容)，以避免重复和保存

首先，找出文件的保存位置(您想要保存的位置)，然后拼接修改文件名的方式(使用时间戳)

$ filesname='。/files/。日期(' YmdHis ')。$ _ FILES[' FIle '][' name ']；//$_FILES['file']['name']这也是(数组)图的名称。二、判断文件是否存在(存在提示，不存在保存在文件夹中)

if(file _ exists($ filename))//file _ exists()方法：判断文件是否存在，其中的值是定义的保存位置{echo' file已经存在'；//提示是否存在}否则{//如果不存在，保存文件(move _ uploaded _ file())move _ uploaded _ file($ _ files[' file '][' tmp _ name ']，$ filename)；//其中的值应该有当前保存位置，保存位置} span style=' font-family :font-size : 15px ' span style=' font-size : 18px '注意：/spanbr1。上传时可能使用UTF-8编码格式，Windows使用国标编码格式，上传时可能会变乱码。您可以在文件保存位置下添加“转换编码格式”，br使用的方法是：/span span style=' font-size : 15px ' iconv():/span span style=' font-size : 15px '。里面有三个值，一个是现在使用的编码格式，一个是要转换的编码格式。第三，要转换的字符串/span $ filename=iconv ('utf-8 '，' gb2312 '，$ filename)；//这个iconv()有三个值，一个是现在使用的编码格式，一个是需要转换的编码格式，第三个是字符串span style='font-family:Font-size: 15px'2。如果上述文件的上传格式被篡改，使用move_uploaded_file()方法/span完成文件上传，可以尝试一下。

二、上传文件预览

上传图片的时候会先看效果如何，然后再上传。下一步是图片预览功能

(1)首先可以有一个文件按钮来选择一个文件

输入id=' uploadImage ' type=' file ' name=' photoimage ' class=' FIM G1 ' onchange=' PreviewImage()；'///向此按钮添加一个事件(2)要显示的图片的div

Div id='uploadPreview'/Div给这个div添加一些样式

# uploadPreview { width : 168 px；高度： 168 px；背景-位置：中心；背景尺寸：封面；border: 4px实心# fff-web kit-box-shadow : 0 0 px 0 px rgba(0，0，0，0)；display:内联块；Br}看效果：

然后是事件的写作

$ ('# uploadimage ')。on ('change '，function(){//获取引用文件列表var files=！这个文件？this . files :[]；//如果没有选择文件或者没有读取文件，返回if(！files.length ||！窗户。FileReader)返回；//只有所选文件是图像，如果(/image/。测试(文件[0]。type)){//创建FileReader的新实例var reader=new file reader()；//以dataurlreader.readasdataurl的形式读取本地文件(文件[0])；//加载时，图像数据设置为divreader。onload end=function(){ $(' # uploadpreview '))。CSS('背景-图像'，' URL '(这个。结果')')；} }});这只是一个简单的上传预览。上传到文件的处理页面尚未写入。改天填写完整的上传图片代码

看选中图片的效果

这样，文件上传和图片预览就结束了，两者可以合并上传图片。我会继续补充完整~ ~ ~