1、引入文件
<script src="__PLUGS__/ajax-upload/jquery.ui.widget.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.iframe-transport.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.fileupload.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.xdr-transport.js"></script>
2、html代码
<div class="layui-form-item shipin" >
<label class="layui-form-label">上传视频</label>
<div class="layui-input-inline">
<input type="file" name="file" class="layui-input upvideo" />
</div>
<div class="layui-input-inline">
<!– 上传进度条及状态: –>
<div class="progress">
<div class="bar" style="width: 0%; margin-top:10px;height:10px;max-width: 300px;background: green;"></div>
</div>
</div>
<div class="layui-form-mid layui-word-aux upstatus"></div>
</div>
<div class="layui-form-item shipin" >
<label class="layui-form-label">视频地址</label>
<div class="layui-input-block">
<input type="text" name="url" value="" id="url" lay-verType="tips" lay-reqText="请上传视频" placeholder="视频上传后的地址" lay-verify="" class="layui-input" readonly
</div>
</div>
<div class="layui-form-item shipin" >
<label class="layui-form-label">视频预览</label>
<div class="layui-input-block">
<!– 预览框: –>
<div class="preview" style="margin-top: 5px;"></div>
</div>
</div>
3、js代码
<script >
$(".upvideo").fileupload({
url:"{:url('admin/common/upVideos')}",//文件上传地址,当然也可以直接写在input的data-url属性内
multipart:true,
dataType: "json", //如果不指定json类型,则传来的json字符串就需要解析jQuery.parseJSON(data.result);
done:function(e,data){
//返回的数据在data.result中,这里dataType中设置的返回的数据类型为json
if(data.result.code==1) {
// 上传成功:
$(".upstatus").text(data.result.msg);
$("#url").val(data.result.path);
$(".preview").html("<embed src="+data.result.path+
" allowscriptaccess='always' allowfullscreen='true' wmode='opaque'"+
" width='200' height='150'></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 >
4、php代码
public function upVideos(){
if ($_POST) {
$file=Request::file("file");
$info = $file->validate(['size' => 1 * 1024 * 1024 * 1024, 'ext' => "mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"])->move(ROOT_PATH.'public'.DS_PROS.'upload'.DS_PROS."video");
if ($info){
$path = '/upload'.DS_PROS."video".DS_PROS.$info->getSaveName();
$path = str_replace("\\", "/", $path);
return json_encode(array("code" => 1, "path" => $path, "name" => $info->getSaveName()));
}else{
return json_encode(array("code" => 0,"msg"=>"上传有误,请检查服务器配置!"));
}
}
}
5、效果图