H5超简单上传图片视频音频等文件

admin   ·   发表于 2020-11-28   ·   代码的日常

这个很多相关教程说明百度都有 可以搜得到


以图片为例子

HTML

<input type="file" id="img_checker" accept="image/*" multiple>
<input type="button" onclick="upload()" value="上传" /> <img src="" id="show_img" style="display: none;">//这句是用来回显及时阅览的


在此做一个笔记:

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

accept表示打开的系统文件目录;

capture表示的是系统所捕获的默认设备(camera:照相机;camcorder:摄像机;microphone:录音);

multiple:支持多选,当支持多选时,multiple优先级大于capture;


JavaScript

这是对应上面的回显及时阅览的js

<script>
//给文件输入框绑定事件
document.getElementById('img_checker').onchange = function () {
var fileReader = new FileReader();
//读取文件输入框已选择的文件
fileReader.readAsDataURL(this.files[0]);
//注册文件加载完毕之后的时间
fileReader.onload = function () {
//让img标签的src属性指向读取的文件
document.getElementById("show_img").style.display="";
document.getElementById('show_img').src = fileReader.result;
}
}
</script>
下面这是提交到后端临时目录的JS <script type="text/javascript">


//上传图片
function upload() {
//创建一个form数据对象
var formData = new FormData()
//将图片文件数据添加到form对象中
formData.append('avatar', document.getElementById('img_checker').files[0])
$.ajax(
{
url: "{#WWW}Wall/ava",
type: "post",
//与普通Ajax提交不同的是,上传文件需要指定processData和contentType属性值为false,原来的data对象直接使用FormData对象
processData: false,
contentType: false,
data: formData,
success: function (data) {
alert(data.info);
},
error: function(err) {
alert(err.info);
//console.log(data);打印服务端返回的数据(调试用),例如result.resultCode == 200
}
}
)
//此时后端就可以像接收传统form表单提交的数据方式接收图片
}

</script>


PHP接受数据部分部分

$file = $_FILES['avatar'];//得到传输的数据
//得到文件名称
$name = $file['name'];
$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型,并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传
//判断文件类型是否被允许上传
if(!in_array($type, $allow_type)){
//如果不被允许,则直接停止程序运行
return ;
}
//判断是否是通过HTTP POST上传的
if(!is_uploaded_file($file['tmp_name'])){
//如果不是通过HTTP POST上传的
return ;
}
$upload_path = INDEX_PATH."View/tlmsu/upload/"; //上传文件的存放路径
//开始移动文件到相应的文件夹
if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){
//print_r(WWW . $upload_path.$file['name']);
return $this->json(array('error'=>true,'info'=>'上传成功'));
}else{
return $this->json(array('error'=>false,'info'=>'上传失败'));
}


获取数组的详情看图打印的数组



效果图阅览









0 Reply   |  Until 2020-11-28 | 328 View
LoginCan Publish Content
每日签到
0人
连续签到0天