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

秒客网