JavaScript/PHP - 多文件上传

• 下载源代码 - 2.43 KB

引言

此代码片段允许用户添加多个文件进行上传。默认情况下，仅显示一个文件上传控件。单击“+”图标后，将添加更多控件。

背景

通常，为了允许上传多个文件，会在表单中预加载不必要的数量的文件上传控件。此代码示例展示了如何在不丢失重要功能的情况下保持表单的简洁。

Using the Code

此代码片段使用 PHP 开发，需要在 Apache Web 服务器上运行。“uploads”目录需要文件读写权限。要在应用程序中使用它，需要添加数据库接口来存储上传的信息。它是一个包含表单及其处理程序的单个文件。

该脚本有两个函数：uploadForm 和 upload。uploadForm 显示表单，而 upload 处理表单。

<?php
if($_POST['pgaction']=="upload")
 upload();
else
 uploadForm();
?>

以上是为新程序员提供的如何在同一脚本中定义表单及其处理方式的示例。

<tr class="txt">
   <td valign="top">
    <div id="dvFile">
     <input type="file" name="item_file[]">
    </div>
   </td>
   <td valign="top">
    <a href="javascript:_add_more();" title="Add more">
     <img src="plus_icon.gif" border="0">
    </a>
   </td>
</tr>

超链接到图标会调用 JavaScript 函数 _add_more，该函数向表单添加更多控件。我使用 div 来标识表单的一个块，并在该块中填充更多控件。

function _add_more() {
  var txt = "<br><input type=\"file\" name=\"item_file[]\">";
  document.getElementById("dvFile").innerHTML += txt;
}

JavaScript 函数会根据需要添加更多控件。

if(count($_FILES["item_file"]['name'])>0) { //check if any file uploaded
  $GLOBALS['msg'] = ""; //initiate the global message
  for($j=0; $j < count($_FILES["item_file"]['name']); $j++) { 
  //loop the uploaded file array
   $filen = $_FILES["item_file"]['name']["$j"]; //file name
   $path = 'uploads/'.$filen; //generate the destination path
   if(move_uploaded_file($_FILES["item_file"]['tmp_name']["$j"],$path)) {
   //upload the file
    $GLOBALS['msg'] .= "File# ".($j+1)." ($filen) uploaded successfully<br>";
    //Success message
   }
  }
 }
 else {
  $GLOBALS['msg'] = "No files found to upload"; //No file upload message 
}

上传的文件处理函数会检查上传的文件，如果找到，则将其存储在 Web 服务器中。

未来增强

在代码中，如果用户选择了一个文件，然后添加了更多控件，则之前的文件信息将不会被存储并丢失。我需要添加一个功能来存储之前选择的文件。