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

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

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

关于bootstrap-fileinput

1 <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属性）。

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

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

初始化插件（Javascript）

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

 1 $(document).on("ready", function() {
 2     $("#images").fileinput({
 3         uploadAsync: false,
 4         uploadUrl: "/path/to/upload.php" // your upload server url
 5         uploadExtraData: function() {
 6             return {
 7                 userid: $("#userid").val(),
 8                 username: $("#username").val()
 9             };
10         }
11     });
12 });

服务器代码（PHP）

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

 1 // upload.php
 2 // 'images' refers to your file input name attribute
 3 if (empty($_FILES['images'])) {
 4     echo json_encode(['error'=>'No files found for upload.']); 
 5     // or you can throw an exception 
 6     return; // terminate
 7 }
 8 
 9 // get the files posted
10 $images = $_FILES['images'];
11 
12 // get user id posted
13 $userid = empty($_POST['userid']) ? '' : $_POST['userid'];
14 
15 // get user name posted
16 $username = empty($_POST['username']) ? '' : $_POST['username'];
17 
18 // a flag to see if everything is ok
19 $success = null;
20 
21 // file paths to store
22 $paths= [];
23 
24 // get file names
25 $filenames = $images['name'];
26 
27 // loop and process files
28 for($i=0; $i < count($filenames); $i++){
29     $ext = explode('.', basename($filenames[$i]));
30     $target = "uploads" . DIRECTORY_SEPARATOR . md5(uniqid()) . "." . array_pop($ext);
31     if(move_uploaded_file($images['tmp_name'][$i], $target)) {
32         $success = true;
33         $paths[] = $target;
34     } else {
35         $success = false;
36         break;
37     }
38 }
39 
40 // check and process based on successful status 
41 if ($success === true) {
42     // call the function to save all data to database
43     // code for the following function `save_data` is not 
44     // mentioned in this example
45     save_data($userid, $username, $paths);
46 
47     // store a successful response (default at least an empty array). You
48     // could return any additional response info you need to the plugin for
49     // advanced implementations.
50     $output = [];
51     // for example you can get the list of files uploaded this way
52     // $output = ['uploaded' => $paths];
53 } elseif ($success === false) {
54     $output = ['error'=>'Error while uploading images. Contact the system administrator'];
55     // delete any uploaded files
56     foreach ($paths as $file) {
57         unlink($file);
58     }
59 } else {
60     $output = ['error'=>'No files were processed.'];
61 }
62 
63 // return a json encoded response for plugin to process successfully
64 echo json_encode($output);

概要

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