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

一、前台代码：

<!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中设置的返回的数据类型为jsonif(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);                   }}}}
}

三、效果图：

相关资料：
jQuery-File-Upload插件源码：https://github.com/blueimp/jQuery-File-Upload
Home wiki地址：https://github.com/blueimp/jQuery-File-Upload/wiki
api地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API
options地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Options
示例demo下载地址1：https://download.csdn.net/detail/smm188/9716174
示例demo下载地址2：https://github.com/smm188/jquery-file-upload-php-demo.git

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

fileUpload实现普通表单和file图片上传到数据库
fileUpload实现普通表单和file图片上传到数据库效果图: 实现 jsp:页面 servelt:控制器 service:逻辑操作 dao:数据库操作 domain:javaBean类首先需 ...
FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用_ ...
imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
php js实现录制mp4视频，并上传视频保存
按钮 <button onclick="videolz()" type="button" style="width: 100px; font-s ...
vue2 + tinymce 包含自定义图片上传及视频、音频上传
安装安装时需要注意一个问题,两个包如果不适用会出现报错情况且无法使用,我这边使用的是当前这两个版本 npm install @tinymce/tinymce-vue@3.2.8 -S npm ins ...
dropify,不错的图片上传预览插件
引言传统的图片上传,很丑.点击选择之后,还无法预览. 有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦. 用这个dropify,就可以解决之歌问题. 看效果用法 1.引入文件,需要jque ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...

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

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

最新文章

热门文章