jquery.fileupload.js外掛使用--單視訊或音訊上傳預覽
阿新 • • 發佈：2018-12-30
一、前臺程式碼：
<!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); } } } } }
三、效果圖：
