The Method of Image Batch Upload Based on thinkPHP5 Framework and plupload

This paper describes the method of thinkPHP5 framework integrating plupload to realize batch uploading function of pictures. Share it for your reference, as follows:

Download plupload http://http//www.plupload.com in official website

Or click here to download it.

Here we use pluploadQueue

Introduce the corresponding css and js on the HTML page, and then modify it to your own code according to the sample code

<link rel="stylesheet" href="/assets/plupupload/css/jquery.plupload.queue.css" rel="external nofollow" type="text/css" media="screen" />
<div class="form-box-header"><h3>{:lang('photo')}</h3></div>
<div class="t-d-in-editor">
  <div class="t-d-in-box">
    <div id="uploader">
      <p>{:lang('plupupload_tip')}</p>
    </div>
    <div id="uploaded"></div>
  </div>
</div>
<script type="text/javascript" src="/assets/plupupload/plupload.full.min.js"></script>
<script type="text/javascript" src="/assets/plupupload/jquery.plupload.queue.js"></script>
<script type="text/javascript">
$(function() {
// Setup html5 version
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,flash,silverlight,html4',
url : '{:url("photo/upphoto")}',
chunk_size: '1mb',
rename : true,
dragdrop: true,
filters : {
// Maximum file size
max_file_size : '10mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"}
]
},
// Resize images on clientside if we can
resize : {width : 320, height : 240, quality : 90},
flash_swf_url : '/assets/plupupload/Moxie.swf',
silverlight_xap_url : '/assets/plupupload/Moxie.xap',
        init: {
            PostInit: function() {
              $('#uploaded').html("");
            },
            FileUploaded : function(uploader , files, result) {
              up_image = result.response;
              if(up_image != ""){
                $("#uploaded").append("<input type='hidden' name='images[]' value='"+up_image+"'/>"); // The upload result is obtained here 
              }
            }
        }
});
});
</script>

plupload integration:

<?php
/* 
 *  File upload 
 * 
 * Donald
 * 2017-3-21
 */
namespace app\backend\logic;
use think\Model;
class Plupupload extends Model{
  public function upload_pic($file_type="data"){
    #!! IMPORTANT: 
    #!! this file is just an example, it doesn't incorporate any security checks and 
    #!! is not recommended to be used in production environment as it is. Be sure to 
    #!! revise it and customize to your needs.
    // Make sure file is not cached (as it happens for example on iOS devices)
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    /* 
    // Support CORS
    header("Access-Control-Allow-Origin: *");
    // other CORS headers if any...
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        exit; // finish preflight CORS requests here
    }
    */
    // 5 minutes execution time
    @set_time_limit(5 * 60);
    // Uncomment this one to fake upload time
    // usleep(5000);
    // Settings
    // Reset the upload path 
    $uploads = config('uploads_dir');
    if(!empty($file_type)){
      $uploads = $uploads .$file_type."/".date("Ymd");
    }
    $targetDir = $uploads;
    //$targetDir = 'uploads';
    $cleanupTargetDir = true; // Remove old files
    $maxFileAge = 5 * 3600; // Temp file age in seconds
    // Create target dir
    if (!file_exists($targetDir)) {
        @mkdir($targetDir);
    }
    // Get a file name
    if (isset($_REQUEST["name"])) {
        $fileName = $_REQUEST["name"];
    } elseif (!empty($_FILES)) {
        $fileName = $_FILES["file"]["name"];
    } else {
        $fileName = uniqid("file_");
    }
    // Rename file 
    $fileName_arr = explode(".", $fileName);
    $fileName = myrule().".".$fileName_arr[1]; //rule() Please see my last blog thinkphp Upload multiple picture files at the same time with duplicate names 
    $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
    // Chunking might be enabled
    $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
    $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;
    // Remove old temp files 
    if ($cleanupTargetDir) {
        if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
        }
        while (($file = readdir($dir)) !== false) {
            $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;
            // If temp file is current file proceed to the next
            if ($tmpfilePath == "{$filePath}.part") {
                continue;
            }
            // Remove temp file if it is older than the max age and is not the current file
            if (preg_match('/\.part$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) {
                @unlink($tmpfilePath);
            }
        }
        closedir($dir);
    } 
    // Open temp file
    if (!$out = @fopen("{$filePath}.part", $chunks ? "ab" : "wb")) {
        die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
    }
    if (!empty($_FILES)) {
        if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
        }
        // Read binary input stream and append it to temp file
        if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
        }
    } else { 
        if (!$in = @fopen("php://input", "rb")) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
        }
    }
    while ($buff = fread($in, 4096)) {
        fwrite($out, $buff);
    }
    @fclose($out);
    @fclose($in);
    // Check if file has been uploaded
    if (!$chunks || $chunk == $chunks - 1) {
        // Strip the temp .part suffix off 
        rename("{$filePath}.part", $filePath);
    }
    // Return Success JSON-RPC response
    die($filePath); // The result is returned directly here 
    // die('{"jsonrpc" : "2.0", "result" : "'.$filePath.'", "id" : "id"}');
  }
}

Finally, Controller or Model gets the result and saves it

$images = $request->post('images/a'); // Here 1 Be careful,  thinkphp Pass name Get post Array, you can't get the data, you need to use the name Add after /a To get the array, see Request Adj. typeCast
model('PhotoImage')->query_insert($images, $id);// Insert pictures in batches 

/**
*  Forced type conversion 
* @param string $data
* @param string $type
* @return mixed
*/
private function typeCast(&$data, $type)
{
    switch (strtolower($type)) {
      //  Array 
      case 'a':
        $data = (array) $data;
        break;
      //  Figures 
      case 'd':
        $data = (int) $data;
        break;
      //  Floating point 
      case 'f':
        $data = (float) $data;
        break;
      //  Boolean 
      case 'b':
        $data = (boolean) $data;
        break;
      //  String 
      case 's':
      default:
        if (is_scalar($data)) {
          $data = (string) $data;
        } else {
          throw new \InvalidArgumentException('variable type error : ' . gettype($data));
        }
    }
}

For more readers interested in thinkPHP related contents, please check the topics of this site: "ThinkPHP Introduction Tutorial", "thinkPHP Template Operation Skills Summary", "ThinkPHP Common Methods Summary", "codeigniter Introduction Tutorial", "CI (CodeIgniter) Framework Advanced Tutorial", "Zend FrameWork Framework Introduction Tutorial" and "PHP Template Technology Summary".

I hope this article is helpful to the PHP programming based on ThinkPHP framework.