PHP combined with web uploader plug-in implements multi-part file upload jquery file upload ajaxfileupload.js jquery uploadif

Recently studied the method of uploading large files and found the webuploader js plug-in for large file uploads. You can also refer to this article to learn: "Detailed explanation of the use of Web Uploader file upload plug-in"

Usage

Use webuploader into simple direct selection To introduce the

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader%E6%96%87%E4%BB%B6%E5%A4%B9/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader%E6%96%87%E4%BB%B6%E5%A4%B9/webuploader.js"></script>

HTML part

<div>
  <!--用来存放文件信息-->
  <div></div>
  <div>
    <div>选择文件</div>
    <button>开始上传      </button>
  </div>
  </div>

Initialize Web Uploader

jQuery(function() {
    $list = $('#thelist'),
      $btn = $('#ctlBtn'),
      state = 'pending',
      uploader;

    uploader = WebUploader.create({
      // 不压缩image
      resize: false,
      // swf文件路径
      swf: 'uploader.swf',
      // 文件接收服务端。
      server: upload.php,
      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#picker',
      chunked: true,
      chunkSize:2*1024*1024,
      auto: true,
      accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
      }
    });

upload.php processing

The following is the php backend code that I modified based on other people’s examples

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");

    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
      exit; // finish preflight CORS requests here
    }
    if ( !empty($_REQUEST[ 'debug' ]) ) {
      $random = rand(0, intval($_REQUEST[ 'debug' ]) );
      if ( $random === 0 ) {
        header("HTTP/1.0 500 Internal Server Error");
        exit;
      }
    }

    // header("HTTP/1.0 500 Internal Server Error");
    // exit;
    // 5 minutes execution time
    @set_time_limit(5 * 60);
    // Uncomment this one to fake upload time
    // usleep(5000);
    // Settings
    // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
    $targetDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material_tmp';
    $uploadDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material';
    $cleanupTargetDir = true; // Remove old files
    $maxFileAge = 5 * 3600; // Temp file age in seconds
    // Create target dir
    if (!file_exists($targetDir)) {
      @mkdir($targetDir);
    }
    // Create target dir
    if (!file_exists($uploadDir)) {
      @mkdir($uploadDir);
    }
    // Get a file name
    if (isset($_REQUEST["name"])) {
      $fileName = $_REQUEST["name"];
    } elseif (!empty($_FILES)) {
      $fileName = $_FILES["file"]["name"];
    } else {
      $fileName = uniqid("file_");
    }
    $oldName = $fileName;
    $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
    // $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;
    // Chunking might be enabled
    $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
    $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
    // 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}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
          continue;
        }
        // Remove temp file if it is older than the max age and is not the current file
        if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) true,
        'oldName'=>$oldName,
        'filePaht'=>$uploadPath,
        'fileSize'=>$data['size'],
        'fileSuffixes'=>$pathInfo['extension'],
        'file_id'=>$data['id'],
        ];

      die(json_encode($response));
    }

   // Return Success JSON-RPC response
    die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');

The above is The entire content of this article is hoped to be helpful to everyone's study.

The above introduces the use of PHP combined with the web uploader plug-in to implement multi-part uploading of files, including upload and loader content. I hope it will be helpful to friends who are interested in PHP tutorials.