Bootstrap File Input 前後端代碼(php)

官方文檔：　http://plugins.krajee.com/file-input

簡介

透過此代碼能夠，透過非同步方式上傳檔案，並透過伺服器端回傳的json值，來進行後處理的動作。

流程

Client端傳送檔案給伺服器，連接成功，則等待server端回傳json值，並透過json值來進行，檔案上傳成功或失敗的後處理動作，如果連結失敗，則報錯。

需用到的函式庫

建議bootstrap使用最新版的v4版本，這樣有些特效才顯示的出來。

bootstrap-4.1.3.css
fontawesome
jquery-3.3.1.min.js

底下這些是Bootstrap File Input的基本函式庫一定要用到，當然你也可以參照文檔來選擇，你要匯入哪些需要的。

fileinput.css
theme.css
sortable.js
fileinput.js
theme.js

前端處理

要使用插件的話，要先進行初始化

範例：

<input id="file" class="file" multiple type="file" name="file"> <!-- 初始化插件 -->

uploadUrl參數

最主要的就是uploadUrl，他是你用來處理檔案的後端位置。

當然他還有很多參數，像succcess參數，能用來處理連接成功後，進行後處理的參數

基本範例：

 <script>
    $("#file").fileinput({
        language: 'zh-TW',  //語言設定
        uploadUrl: 'upload.php',  //上傳地址
        overwriteInitial: false
    });
 </script>

uploadExtraData參數

當然你還有其它表單的input值需要一起傳送的話，可以加入uploadExtraData這個參數

基本範例：

透過jquery取得id的val值，並利用return進行回傳的動作

 <script>
    $("#file").fileinput({
        language: 'zh-TW',  //語言設定
        uploadUrl: 'upload.php',  //上傳地址
        overwriteInitial: false,
        uploadExtraData:function(){  //向後台傳輸參數
        var data={
            Tile:$("#titiLe").val(), //取得id為title的val值
            Introduce:$("#Textarea").val(),
            Sell_Price:$("#Price").val()
        };
        return data;
        }
    });
 </script>

success參數

它可以用來處理你連接後端成功後，進行後續處理的動作

基本範例：

success: function(data){"你的程式碼"}

裡面的data為server端回傳的json值

所以你有要調用json的回傳值的話，你要先轉換json，因為此時的json是物件
可以使用以下方法進行轉換

範例：

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

基本範例：

 <script>
    $("#file").fileinput({
        language: 'zh-TW',  //語言設定
        uploadUrl: 'upload.php',  //上傳地址
        overwriteInitial: false,
        success: function(data){
         //////這裡可以放你自己的程式像alert("連接成功");
        }
    });
 </script>

前端完整代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上傳頁面</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="/kartik-v-bootstrap/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/kartik-v-bootstrap/themes/explorer-fas/theme.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="/kartik-v-bootstrap/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="/kartik-v-bootstrap/js/fileinput.js" type="text/javascript"></script>
    <script src="/kartik-v-bootstrap/js/locales/zh-TW.js" type="text/javascript"></script>
    <script src="/kartik-v-bootstrap/themes/explorer-fas/theme.js" type="text/javascript" ></script>
    <script src="/kartik-v-bootstrap/themes/fas/theme.js" type="text/javascript" ></script>
</head>
<body>
  <div class="container kv-main">   
   <br>
   <form>    
    <div class="form-group">
        <input id="file" class="file" multiple type="file" name="file" data-theme="fas"> <!-- 初始化插件 -->
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-outline-secondary">Reset</button>
   </form>
  </div>
 </body>
 <script>
    $("#file").fileinput({
        language: 'zh-TW',  //語言設定
        uploadUrl: 'upload.php',  //上傳地址
        overwriteInitial: false
    });
 </script>
</html>

後端處理

最主要，需要回傳json值給前端
這裡利用json_encode("json值")這個函數就行了
範例：

$output = ['success'=>'上傳成功'];
echo json_encode($output);

你可以透過chrome的開發人員工具，去抓取回傳值，回傳值會長底下這樣

{success: "上傳成功"}

後端完整代碼

<?php
// upload.php
if (empty($_FILES['file'])) {
    // No files found for upload.
    echo json_encode(['error'=>'未選擇檔案']); 
    return; 
}
else{
    $images = $_FILES['file']; // 獲取上傳的文件
    $filenames = $images['name']; // 文件名
    $filetypes = $images['type']; // 文件類型
    $filesizes = $images['size']; // 文件大小
    $filetmps = $images['tmp_name']; // 文件臨時路徑
}
$success = null; // 上傳成功與否的flag
for($i=0; $i < count($filenames); $i++){ // 接收上傳的文件
    $ext = explode('.', basename($filenames)); //将文件名按 “.” 分割成数组
    $target = "upload" . DIRECTORY_SEPARATOR . md5(uniqid()) . "." . array_pop($ext); //上傳到server的路徑（文件名用uniqid和md5生成 不重覆唯一）
    if(move_uploaded_file($filetmps, $target)) { //tmp_name 為上傳檔案的臨時位置，將其移動到需要上傳的路径
        $success = true;
    } else {
        $success = false;
        break;
    }
}
if ($success === true) {
    $output = ['success'=>'上傳成功']; // 成功的處理
} 
elseif ($success === false) { 
    $output = ['error'=>'上傳失敗']; // 失敗的處理
} 
else {
    $output = ['error'=>'未知操作']; //處理未知情況
}
echo json_encode($output); // 返回json

Demo預覽

預覽

詳細資料

原始碼下載

MEGA載點 ：點我下載

Last modification：December 8th, 2019 at 01:27 pm
© 允许规范转载