h5上传视频并预览 php,移动端HTML5 文件预览及上传

本文主要介绍使用HTML5 图片上传及上传前的预览。本人是做PHP后端的，由于前端有时也需要自己写，有空就研究了下图片上传预览，写的都是原生代码，废话不多说，直接上代码。

前端代码

Documenttitle>

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>

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 > 9){

alert("上传最大数量不能大于9");

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>

图片上传及预览h2>

图片上传及预览label>

div>

ul>

div>

视频上传及预览label>

div>

div>

上传div>

form>

body>

html>

看效果：

在google chrome 浏览器打开效果

手机uc浏览器打开

在手机浏览器打开会调用手机摄像头进行拍摄。

抛开美观不说，暂且讨论下兼容性，除了苹果safari没测试外，在现在主流浏览器上(ie8以上级别),展示效果差不多。

下面开始讲解代码(关键部分代码)

文件预览主要是用到了这个webApi :FileReader

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;

// imgArr.push(e.target.result);

}

首先是新建了一个FileReader 对象，然后是readAsDataURL(file),该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成(DONE)，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。 在读取操作完成时触发reader.onload事件，在该事件出来处理中，将读取的图片内容赋值给生成的img dom的src 属性。然后初始化预览图片高度(inintHW())，将base64编码内容push 到数组中。

上面注释掉的代码跟没注释的代码功能是一样的，只不过该api 有兼容性问题，我看到也有网友使用该api实现了图片预览功能，但我个人看法跟官方给的提示一样，暂时不建议使用！！！

至于FileReader 这个web api 的使用说明，详情请移步：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

URL.createObjectURL() 用法：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

再看一下视频预览：

视频预览是跟图片预览原理是一样的。

不过在移动端即便这样子写 也不会调起手机摄像，至于为什么要这样子写，我也不是很懂，在网上查资料，看到有人这样子做，就尝试了下，果然不行，不过读取文件预览是没问题的，这里暂不考虑这个问题。

下面来看上传功能代码(只讨论图片上传)：

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);

关键代码fd.append('file[]',imgArr[i]); 在for循环中，写成file[]是为了后台PHP 处理方便，写成这个样子，PHP后台可以把它当做数组来处理。

这里使用了ajax 和 formData ，如果不熟悉这两个知识点，请移步

ajax: https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

file_preview.php 代码

$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 = mt_rand().'.'.$ImageType;

file_put_contents($filePath.$fileName,base64_decode($res));

}else{

return false;

}

}

讲解：首先判断上传的文件的数量，$imgCount = count($_POST['file']); 然后循环处理，正则匹配文件名后缀，preg_match('/^(data:\s*image\/(\w+);base64,)/',$_POST['file'][$i],$result)，获取文件名后缀：$ImageType = $result[2];，然后将类似data:image/png;base64,头给处理掉：$res = str_replace($result[0],'',$_POST['file'][$i]);，然后保存图片到服务器：file_put_contents($filePath.$fileName,base64_decode($res));

为什么要将base64编码：data:image/png;base64 给处理掉呢？因为如果直接放到php里用base64_decode函数解码会导致最终保存的图片文件格式损坏，而解决方法就是先去掉这一base64识别部分。

整体效果图：