基于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等等