jquery.fileupload.js外掛使用初探--多圖片上傳預覽
阿新 • • 發佈：2018-12-31
一、前臺程式碼：
<!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: 370px; background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" multiple> <span class="proportion"></span> <!-- 上傳進度條及狀態： --> <div class="progress"> <div class="bar" style="width: 0%;"></div> <div class="upstatus" style="margin-top:10px;"></div> </div> <!-- 預覽框： --> <div class="preview" style="margin-top:20px;"></div> </body> </html> <script type="text/javascript"> $('#fileupload').fileupload( { url: 'upfilemore.php', dataType: "json", multipart:true, done:function(e,data){ //done方法就是上傳完畢的回撥函式，其他回撥函式可以自行檢視api //注意data要和jquery的ajax的data引數區分，這個物件包含了整個請求資訊 //返回的資料在data.result中，這裡dataType中設定的返回的資料型別為json if(data.result.sta) { // 上傳成功： $(".preview").append("<div style='margin-top:10px;'><img src="+data.result.previewSrc+"></div>"); $(".preview").append("<div>"+data.result.msg+"</div>"); } else { // 上傳失敗： $(".upstatus").append("<div style='color:red;'>"+data.result.msg+"</div>"); } }, progressall: function (e, data) {//上傳進度 var progress = parseInt(data.loaded / data.total * 100, 10); $(".progress .bar").css("width", progress + "%"); $(".proportion").html("上傳總進度："+progress+"%"); } } ); </script>
二、後臺php程式碼，即檔案upfilemore.php的程式碼：
<?php $fileArr = $_FILES['files']; //設定預覽目錄 $previewPath = "upload/preview/"; creatDir($previewPath); //ajax返回陣列 $data = array('sta'=>TRUE,'msg'=>'圖片上傳成功！'); //檢查是否為圖片 $ext = getExt($fileArr['name'][0]); $arrExt = array('jpg','jpeg','gif','png'); if(!in_array($ext,$arrExt)) { $data['sta'] = FALSE; $data['msg'] = 'Error:檔案《'.$fileArr['name'][0].'》不是圖片或採用了不合適的副檔名！'; } else { //檔案上傳到預覽目錄 if($fileArr['error'][0] == 0) { $previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext; $previewSrc = $previewPath.$previewName; // $fileName = $fileArr['name'][0]; if(!move_uploaded_file($fileArr['tmp_name'][0],$previewSrc)) { $data['sta'] = FALSE; $data['msg'] = $fileArr['name'][0].'圖片上傳失敗！'; } else { $data['msg'] = $fileArr['name'][0].'圖片上傳成功！'; $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); } } } } }
三、效果圖：
