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

来源：互联网发布：vue是什么软件编辑：程序博客网时间：2024/04/29 17:58

一、前台代码：

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

三、效果图：

1 2