jquery.fileupload.js外掛使用初探--單圖片上傳預覽
阿新 • • 發佈:2019-01-05
一、官方外掛下載地址:http://plugins.jquery.com/blueimp-file-upload/
下載下來後會發現裡面包含了一堆檔案,首先需要弄清楚的是最核心的部分是哪些,根據官方的例子可以知道,一個最簡單的jQuery File Upload上傳元件,必須包括以下檔案:
下面是後臺的php程式碼:
api地址:https://github.com/blueimp/jQuery-File-Upload/wiki/API
options地址:https://github.com/blueimp/jQuery-File-Upload/wiki/Options
下載下來後會發現裡面包含了一堆檔案,首先需要弄清楚的是最核心的部分是哪些,根據官方的例子可以知道,一個最簡單的jQuery File Upload上傳元件,必須包括以下檔案:
- jQuery核心庫,建議使用jQuery 1.8以上版本
- js/vendor/jquery.ui.widget.js :jQuery UI Widget
- js/jquery.iframe-transport.js : 擴充套件iframe資料傳輸
- js/jquery.fileupload.js : jQuery File Upload核心類
- js/cors/jquery.xdr-transport.js: 在IE下應載入此檔案解決跨域問題
二、載入這幾個必備檔案後,就開始單圖片上傳預覽的前臺程式碼了:
<!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;'>(支援.jpg .jpeg .gif .png格式)</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:"upfileone.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("<img src="+data.result.previewSrc+">"); } 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程式碼:
<?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('jpg','jpeg','gif','png'); 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); } } } } }
api地址:https://github.com/blueimp/jQuery-File-Upload/wiki/API
options地址:https://github.com/blueimp/jQuery-File-Upload/wiki/Options