基于Ajax的文件上传使用FileInput插件(使用谷歌翻译作者的原文,大致意思是对的,自己把握)

bootstrap-fileinput 说明文档:http://plugins.krajee.com/file-input

有许多人希望学习使用bootstrap-fileinput jQuery插件实现AJAX上传的查询和请求。如何构建服务器代码（例如PHP）来解析AJAX响应并将数据发送回插件？这个webtip提到了一个PHP服务器端处理使用bootstrap-fileinput插件来处理基于ajax的上传的例子。

关于bootstrap-fileinput

<input id="images" name="images[]" type="file" multiple>

 

该bootstrap-fileinput jQuery插件通过Krajee是一种先进的HTML 5文件输入使用引导3.x的CSS样式设计的。这是一个简单而强大的文件管理工具和解决方案，适用于使用HTML 5和CSS 3功能（大多数现代浏览器支持）的Web开发人员。除了高级风格和布局，该插件提供了各种文件的文件预览，多个选择包括拖放，基于ajax的上传与进度条，设置初始预览和删除等。

先决条件

确保遵循并遵守引导文件输入jQuery插件的所有先决条件。在运行下面的其他脚本之前，您必须先加载引导程序CSS和jQuery库。

输入标记（HTML）

让我们考虑你有以下的标记来初始化输入。考虑的方案是基于Ajax的多个图像的上传。你的标记可以像下面一样简单（注意id和name属性）。

但是，在很多情况下，您可能需要提交其他表单域或其他数据。让我们考虑你在你的表单中有以下额外的领域。

<input id="userid" name="userid" type="hidden">
<input id="username" name="username" type="text">

初始化插件（Javascript）

我们来考虑一个通过Ajax上传文件的简单方案。您将需要设置JavaScript来初始化引导文件输入插件。请注意，这里的例子使用jQuery。当文件上传时，你想发送额外的表格数据（即user_id和user_name）。你可以设置所有这些如下所述。默认情况下，插件将通过并行ajax调用以异步模式上传。你可以通过uploadAsync属性来控制它。

$(document).on("ready", function() {
    $("#images").fileinput({
        uploadAsync: false,
        uploadUrl: "/path/to/upload.php" // your upload server url
        uploadExtraData: function() {
            return {
                userid: $("#userid").val(),
                username: $("#username").val()
            };
        }
    });
});

服务器代码（PHP）

让我们看看上面提到的将接收和处理数据的服务器代码。upload.php

// upload.php
// 'images' refers to your file input name attribute
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);

概要

这是一个基本的设置，你需要做的上传文件通过Ajax和插件应该处理它。请注意，对于您的实际情况，您可能需要调整各种其他设置，并添加到上面的基本设置。您可能还需要控制插件的其他各种特性，使其工作，你所希望的方式为您的整个应用程序-样uploadAsync，initialPreview，initialPreviewDelete等等。同样地，你可以使用各种事件的插件触发或执行其他操作-例如filepreupload，fileuploaded等等