如何让用户在不刷新页面的情况下从他刚刚上传的多张图片中选择一张图片？答案

【问题标题】：How can I enable user to select one image from the multiple images that he has just uploaded without refreshing the page?如何让用户在不刷新页面的情况下从他刚刚上传的多张图片中选择一张图片？
【发布时间】：2016-12-22 23:24:41
【问题描述】：

我有一个表单，用户可以在其中上传多张图片。我需要一种方法让用户在提交表单之前从他刚刚上传的图片中选择一张图片作为主图片。

我已经使用 JavaScript 文件阅读器加载了预览。我试图通过 JavaScript 为用户选择的图像添加一个名称，因此它可以作为 PHP 脚本中的 post 元素进行访问。但它不起作用，因为它不能作为文件访问。在发布这个问题之前，我已经花了整整 3 天的时间。任何人都可以告诉我如何解决这个问题，这将是一个巨大的帮助。

以下是表格：

<input type="file" name="files[]" multiple="true" id="file">
<div class="list"></div>

加载预览的Javascript代码：

    var imagesPreview = function(input, p) {
    var id=1;
    if (input.files) {
      var filesAmount = input.files.length;
      for (i = 0; i < filesAmount; i++) {
          var reader = new FileReader();
          reader.onload = function(event) {
              $($.parseHTML('<img class="thumb" id="'+id+'">')).attr('src', event.target.result).appendTo(p);
              id++;
          }
          reader.readAsDataURL(input.files[i]);
      }
     } 
    };

上传文件的PHP代码：

    $total = count($_FILES['files']['name']);
    // Loop through each file
    for($i=0; $i<$total; $i++) {
      //Get the temp file path
      $tmpFilePath = $_FILES['files']['tmp_name'][$i];
      //Make sure we have a filepath
      if ($tmpFilePath != ""){
        //Setup our new file path
        $newFilePath = "gig_pics/" . $_FILES['files']['name'][$i];
        //Upload the file into the temp dir
        move_uploaded_file($tmpFilePath, $newFilePath);
        $file_sql = "INSERT INTO `gig_pics`(id,gig_id,pic) VALUES ('','$gid','$newFilePath')";
        $file_res = mysqli_query($conn,$file_sql);
      }
    }

在使用 jquery 添加名称后，我尝试以帖子的形式访问图像

    $main_img_path = $_POST['selectImage'];
    $main_img_path = $_FILES['selectImage'];

但我可以做任何事情。

【问题讨论】：

在没有看到一些代码的情况下很难提供帮助。 ;)
谢谢，我已经上传了代码。对不起，我认为代码可能太多余了。
谢谢，我在下面给出了一个可能的答案。

标签： javascript php jquery image-uploading

【解决方案1】：

我认为您的问题在于您从文件列表中选择特定文件的方式：

$main_img_path = $_FILES['selectImage'];

我已经有一段时间没有使用 PHP 了，但我认为如果您已经在循环浏览服务器上的文件，为什么不在循环时检查主图像呢？像这样的东西（假设 $_POST['selectImage'] 包含所选图像的临时文件名）：

$total = count($_FILES['files']['name']);
// Loop through each file
for($i=0; $i<$total; $i++) {
  //Get the temp file path
  $tmpFilePath = $_FILES['files']['tmp_name'][$i];
  //Make sure we have a filepath
  if ($tmpFilePath != ""){

    if ($tmpFilePath === $_POST['selectImage']) {
        // This is the selected image
    }
    //Setup our new file path
    $newFilePath = "gig_pics/" . $_FILES['files']['name'][$i];
    //Upload the file into the temp dir
    move_uploaded_file($tmpFilePath, $newFilePath);
    $file_sql = "INSERT INTO `gig_pics`(id,gig_id,pic) VALUES ('','$gid','$newFilePath')";
    $file_res = mysqli_query($conn,$file_sql);
  }
}

就像我说的，这取决于 $_POST['selectImage'] 包含的内容，因为我不确定您在其中存储了什么。

【讨论】：