您的位置：首页 > Web前端 > JQuery

jquery.fileupload.js插件使用--单视频或音频上传预览

2016-02-26 15:58 681 查看

一、前台代码：

<!DOCTYPE html>
<html>
<head>
<title>jquery.fileupload.js使用测试</title>
<script src="jquery-1.12.0.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.iframe-transport.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.xdr-transport.js"></script>
<style type="text/css">
.bar {
margin-top:10px;
height:10px;
max-width: 300px;
background: green;
}
</style>
</head>
<body>
<div style="margin-top:20px;">
<span>请上传：</span>
<span style='color:blue;'>(支持'3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav'格式)</span>
</div>
<div style="margin-top:10px;">
<form action="" name="" enctype="multipart/form-data">
<input type="file" name="files" class="upinput" param1="xxx"/>
<input type="hidden" name="param2" value="yyy" class="param2">
</form>
</div>
<!-- 上传进度条及状态： -->
<div class="progress">
<div class="bar" style="width: 0%;"></div>
<div class="upstatus" style="margin-top:10px;"></div>
</div>
<!-- 预览框： -->
<div class="preview"></div>
</body>
</html>
<script type="text/javascript">
$(".upinput").fileupload({
url:"accept_video_one.php",//文件上传地址，当然也可以直接写在input的data-url属性内
dataType: "json", //如果不指定json类型，则传来的json字符串就需要解析jQuery.parseJSON(data.result);
formData:function(form){//如果需要额外添加参数可以在这里添加
return [{name:"param1",value:$(".upinput").attr("param1")},
{name:"param2",value:$(".param2").val()}];
},
done:function(e,data){
//done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
//注意data要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
//返回的数据在data.result中，这里dataType中设置的返回的数据类型为json
if(data.result.sta) {
// 上传成功：
$(".upstatus").html(data.result.msg);
$(".preview").html("<embed src="+data.result.previewSrc+
" allowscriptaccess='always' allowfullscreen='true' wmode='opaque'"+
" width='480' height='400'></embed>");
} else {
// 上传失败：
$(".progress .bar").css("width", "0%");
$(".upstatus").html("<span style='color:red;'>"+data.result.msg+"</span>");
}

},
progress: function (e, data) {//上传进度
var progress = parseInt(data.loaded / data.total * 100, 10);
$(".progress .bar").css("width", progress + "%");
$(".upstatus").html("正在上传...");
}
});
</script>

二、后台代码：

<?php
$file = $_FILES['files'];
//formData传过来的参数param1和param2
$param1 = $_POST['param1'];
$param2 = $_POST['param2'];
//ajax返回数组
$data = array('sta'=>TRUE,'msg'=>'上传成功！');
//检查是否为图片
$ext = getExt($file['name']);
$arrExt = array('3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav');
if(!in_array($ext,$arrExt)) {
$data['sta'] = FALSE;
$data['msg'] = '不支持此类型文件的上传！';
}
//设置预览目录
$previewPath = 'upload/preview/';
creatDir($previewPath);

if($file['error'] == 0) {
if(isset($param1) && isset($param2)) {
//需要用到$param1和$param2的一些其他操作...

//文件上传到预览目录
$previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext;
$previewSrc = $previewPath.$previewName;
if(!move_uploaded_file($file['tmp_name'],$previewSrc)) {
$data['sta'] = FALSE;
$data['msg'] = '上传失败！';
} else {
$data['previewSrc'] = $previewSrc;
}

}
}
echo json_encode($data);
//获取文件扩展名
function getExt($filename) {
$ext = pathinfo($filename, PATHINFO_EXTENSION);
return $ext;
}
//创建目录并赋权限
function creatDir($path) {
$arr = explode('/',$path);
$dirAll = '';
$result = FALSE;
if(count($arr) > 0) {
foreach($arr as $key=>$value) {
$tmp = trim($value);
if($tmp != '') {
$dirAll .= $tmp.'/';
if(!file_exists($dirAll)) {
mkdir($dirAll,0777,true);
}
}
}
}
}

三、效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php jquery.fileupload.js 视频上传预览

相关文章推荐

新的分享

章节导航