Jquery fileinput插件无法正常工作

Question

使用无限主题找到的初始化。

每次运行脚本时，它都会启动我的照片处理程序，但总会有一个空的文件对象。

我搜索了很多论坛，但这个插件的信息非常有限。

var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
  '  <div class="modal-content">\n' +
  '    <div class="modal-header">\n' +
  '      <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
  '      <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
  '    </div>\n' +
  '    <div class="modal-body">\n' +
  '      <div class="floating-buttons btn-group"></div>\n' +
  '      <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
  '    </div>\n' +
  '  </div>\n' +
  '</div>\n';

// Buttons inside zoom modal
var previewZoomButtonClasses = {
  toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
  fullscreen: 'btn btn-default btn-icon btn-xs',
  borderless: 'btn btn-default btn-icon btn-xs',
  close: 'btn btn-default btn-icon btn-xs'
};

// Icons inside zoom modal classes
var previewZoomButtonIcons = {
  prev: '<i class="icon-arrow-left32"></i>',
  next: '<i class="icon-arrow-right32"></i>',
  toggleheader: '<i class="icon-menu-open"></i>',
  fullscreen: '<i class="icon-screen-full"></i>',
  borderless: '<i class="icon-alignment-unalign"></i>',
  close: '<i class="icon-cross3"></i>'
};

// File actions
var fileActionSettings = {
  zoomClass: 'btn btn-link btn-xs btn-icon',
  zoomIcon: '<i class="icon-zoomin3"></i>',
  dragClass: 'btn btn-link btn-xs btn-icon',
  dragIcon: '<i class="icon-three-bars"></i>',
  removeClass: 'btn btn-link btn-icon btn-xs',
  removeIcon: '<i class="icon-trash"></i>',
  indicatorNew: '<i class="icon-file-plus text-slate"></i>',
  indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
  indicatorError: '<i class="icon-cross2 text-danger"></i>',
  indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
};
var $hp = $("#homeowner_picture");

$(".file-input-ajax").fileinput({
  uploadUrl: "http://localhost:8082/photo/photohandler.php", // server upload action
  uploadAsync: true,
  maxFileCount: 5,
  initialPreview: [],
  fileActionSettings: {
    removeIcon: '<i class="icon-bin"></i>',
    removeClass: 'btn btn-link btn-xs btn-icon',
    uploadIcon: '<i class="icon-upload"></i>',
    uploadClass: 'btn btn-link btn-xs btn-icon',
    zoomIcon: '<i class="icon-zoomin3"></i>',
    zoomClass: 'btn btn-link btn-xs btn-icon',
    indicatorNew: '<i class="icon-file-plus text-slate"></i>',
    indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
    indicatorError: '<i class="icon-cross2 text-danger"></i>',
    indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>',
  },
  layoutTemplates: {
    icon: '<i class="icon-file-check"></i>',
    modal: modalTemplate
  },
  initialCaption: "No file selected",
  previewZoomButtonClasses: previewZoomButtonClasses,
  previewZoomButtonIcons: previewZoomButtonIcons
});

<div class="form-group">
  <label class="col-lg-2 control-label text-semibold">AJAX upload:</label>
  <div class="col-lg-10">
    <input id="homeowner_picture" type="file" class="file-input-ajax" multiple="multiple">
    <span class="help-block">This scenario uses asynchronous/parallel uploads. Uploading itself is turned off in live preview.</span>
  </div>
</div>

PHP代码也来自fileinput示例：

<?php
error_log("photo handler started");
// upload.php
// 'images' refers to your file input name attribute
error_log ($_FILES[input-name]);
if (empty($_FILES['images'])) {
    echo json_encode(['error'=>'No files found for upload.']); 
    // or you can throw an exception 
    return; // terminate
}

// get the files posted
$images = $_FILES['images'];

// get user id posted
$userid = empty($_POST['userid']) ? '' : $_POST['userid'];

// get user name posted
$username = empty($_POST['username']) ? '' : $_POST['username'];

// a flag to see if everything is ok
$success = null;

// file paths to store
$paths= [];

// get file names
$filenames = $images['name'];

// loop and process files
for($i=0; $i < count($filenames); $i++){
    $ext = explode('.', basename($filenames[$i]));
    $target = "uploads" . DIRECTORY_SEPARATOR . md5(uniqid()) . "." . array_pop($ext);
    if(move_uploaded_file($images['tmp_name'][$i], $target)) {
        $success = true;
        $paths[] = $target;
    } else {
        $success = false;
        break;
    }
}

// check and process based on successful status 
if ($success === true) {
    // call the function to save all data to database
    // code for the following function `save_data` is not 
    // mentioned in this example
    save_data($userid, $username, $paths);

    // store a successful response (default at least an empty array). You
    // could return any additional response info you need to the plugin for
    // advanced implementations.
    $output = [];
    // for example you can get the list of files uploaded this way
    // $output = ['uploaded' => $paths];
} elseif ($success === false) {
    $output = ['error'=>'Error while uploading images. Contact the system administrator'];
    // delete any uploaded files
    foreach ($paths as $file) {
        unlink($file);
    }
} else {
    $output = ['error'=>'No files were processed.'];
}

// return a json encoded response for plugin to process successfully
echo json_encode($output);

?>