JSPHP-表单⽂件域上传⽂件和PHP后台处理
表单⽂件域上传⽂件和PHP后台处理
1.html代码部分：
form表单中，chechbox，radios，⽂件域，下拉框等不能修改样式组件的样式，所以为了好看要先修改他们的样式
基本思路：
⾸先通过label绑定input:avatar，然后让input:avatar display：none。这样点击label就能选中⽂件域了
然后添加img和i标签，img是⽤来提交头像后显⽰在此处，⽽i是⽤来在img空的时候做遮挡层的
修改img和i的样式，令他们有长宽
最后要写⼀个input:hidden，这是隐藏域，⽤来不会在页⾯显⽰但可以随表单提交数据，这⾥可以把⽤户提交的头像保存的地址通过表单提交到后台
<form class="form-horizontal" method="post" action="/admin/users-add.php">
<div class="form-group">
<label class="col-sm-3 control-label">头像</label>
<div class="col-sm-6">
<!--这⾥的头像框改变了⽂件提交按钮的默认样式-->
<label class="form-image">
<input id="avatar" type="file">
<img src="st/static/assets/img/default.png">
<!--隐藏域：看不见的⽂本框，作⽤是⽤来提交键值-->
<input type="hidden" name="avatar">
<i class="mask fa fa-upload"></i>
</label>
</div>
</div>
</form>
2.js代码部分：
重点是通过FormData（）这个对象来将⽂件转化为键和⼆进制的数据的格式
//关于表单⽂件域的使⽤，⽂件域有⽂件提交时也是触发change事件的。
//对input:file元素来说，提交的⽂件是保存在DOM属性files中，可以通过这个属性判断有没有提交，以及获得提交的元素
$('#avatar').on('change',function () {
//当⽂件选择状态变化会执⾏这个事件处理函数
var $this = $(this);
var files = $(this).prop('files');
//如果length为0，说明未提交⽂件
if(!files.length){
return ;
}
//拿到⽤户提交的⽂件
var file = files[0];
//异步⽂件上传============================================================
//FormData是HTML5新增的⼀个成员，专门配合ajax操作，⽤于在客户端和服务端之间传递⼆进制数据
var data = new FormData();
//保存为键值的⽅式
data.append('avatar',file);
/
/通过ajax发送到服务端，这⾥通过未封装的ajax⽐较⽅便，⽤jq反⽽不⽅便
var xhr = new XMLHttpRequest();
xhr.open('POST','/admin/api/upload.php');
xhr.send(data); //将⼆进制形式的⽂件发送到后台
// console.sponseText);
$this.siblings('img').attr('src',sponseText);
$this.siblings('input').sponseText);
}
})
</script>
3.PHP后台代码部分：
这部分⾸先⽤$_FILES接收键为avatar的数据，并了解其中每项的意义
判断是否上传成功，然后将⽂件保存在新地址中
返回给客户端这个地址，客户端就能通过这个地址将对应地址的图⽚显⽰在img标签中&新增数据库的⽤户
<?php
//服务端要做的事情
//接收⽂件
//保存⽂件
//返回这个⽂件访问url
if(empty($_FILES['avatar'])){
exit('必须上传⽂件');
}
$avatar = $_FILES['avatar'];
//传递过来的是avatar为键，⼆进制内容为值的键值对，但如果直接打印值的话是⼀个关联数组
//array(5) {
// ["name"]=>
// string(12) "widget_5.jpg" 客户端⽂件的原名称。
// ["type"]=>
// string(10) "image/jpeg" ⽂件的 MIME 类型，需要浏览器提供该信息的⽀持
// ["tmp_name"]=>
// string(27) "C:\Windows\p" ⽂件被上传后在服务端储存的临时⽂件名，⼀般是系统默认。可以在php.ini的upload_tmp_dir 指定// ["error"]=> 和该⽂件上传相关的错误代码
inputtypefile不上传文件// int(0)
// ["size"]=> 已上传⽂件的⼤⼩，单位为字节。
// int(28658)
//}
//判断⽂件是否上传成功，只有$avatar['error']等于UPLOAD_ERR_OK，才表⽰上传成功
//UPLOAD_ERR_OK
//值：0; 没有错误发⽣，⽂件上传成功。
//UPLOAD_ERR_INI_SIZE
//值：1; 上传的⽂件超过了 php.ini 中 upload_max_filesize 选项限制的值。
//UPLOAD_ERR_FORM_SIZE
//值：2; 上传⽂件的⼤⼩超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。
//UPLOAD_ERR_PARTIAL
/
/值：3; ⽂件只有部分被上传。
//UPLOAD_ERR_NO_FILE
//值：4; 没有⽂件被上传。
//值：5; 上传⽂件⼤⼩为0.
if($avatar['error'] !== UPLOAD_ERR_OK){
exit('⽂件上传失败');
}
//校验类型，⼤⼩
//移动⽂件到⽹站范围之外
//pathinfo() 返回⼀个关联数组包含有 path 的信息。⽐如：
//Array
/
/(
// [dirname] => /testweb
// [basename] =>
// [extension] => txt
//)
//这⾥就获取图⽚⽂件名的后缀=>jpg
$ext = pathinfo($avatar['name'] , PATHINFO_EXTENSION);
//uniqid() 函数基于以微秒计的当前时间，⽣成⼀个唯⼀的 ID。
//拼接出⼀个新地址
$target = '../../static/uploads/img-' . uniqid() . '.' . $ext;
//move_uploaded_file将上传的⽂件移动到新位置。若成功，则返回 true，否则返回 false。
if(!move_uploaded_file($avatar['tmp_name'] , $target)){
exit('上传失败');
}
//上传成功，根据实际需要截取下地址字符串
echo substr($target,5);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论