如何在选择文件后立即上传图片，而不是强制用户单击单独的 "Upload" 按钮？

Question

我有一个图片上传表单，您可以在其中单击 "Choose Image"，它会显示文件选择 window。你选择一个图像，然后文件名出现在屏幕上（还不是图像，只是文件名）旁边是新出现的 "Upload" 按钮。然后您必须点击 "Upload" 才能使图像真正上传并显示在预览窗格中。

我很想压缩这个过程，这样当有人点击 "Choose Image" 并选择他们想要上传的图片时，它会删除中间人并立即上传图片并在预览窗格中显示图片.为什么让用户必须点击 "Upload"?

我在下面包含了我的相关代码。有没有办法调整我现有的代码，使上传部分在选择文件后立即发生？还是我可能需要从头开始才能做我想做的事？

图片上传表单：

<li class="section">
            <label class="caption" for="">Pool Image </label> (OPTIONAL - You can add one later if you don't have one now)<br>           
            <div id="preview"><img id="image" src="images/no-image.png" /></div>
            <label for="uploadImage" id="custom-file-upload">
                Choose Image
            </label>
            <span id="file-selected"></span>
            <input id="uploadImage" type="file" accept="image/*" name="image" />
            <input id="button" type="button" value="Upload" class="displaynone webkit">
            <input id="remove-image" class="displaynone" type="button" value="Remove/Change">
            <div id="err"></div>
            </li>
            <li class="section">
            <a class="goback" id="cancel-and-remove-image" href='/my-pools'>&laquo; Cancel</a>
            <input type="submit" name="submit"  class="submit" value="Create Pool &raquo;" />
            </li>

这个JS也在页面上：

$(document).ready(function () {
    $("input:file").change(function (){
      $( "#button" ).show();
     });

 $('#uploadImage').on('change', function() { var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); });

 $("#button").click(function(){
    var imageData = new FormData();
    imageData.append('image', $('#uploadImage')[0].files[0]);

    //Make ajax call here:
    $.ajax({
          url: '/upload-image-ajax.php',
          type: 'POST',
          processData: false, // important
          contentType: false, // important
          data: imageData,
          beforeSend : function()  {
            $("#err").fadeOut();
           },
       success: function(result) {
            if(result=='invalid file') {
             // invalid file format.
             $("#err").html("Invalid File. Image must be JPEG, PNG or GIF.").fadeIn();
            } else {

             // view uploaded file.
             $("#image").attr('src', '/'+result);
            /* $("#preview").html(data).fadeIn();*/
            /* $("#form")[0].reset(); */
             //show the remove image button
             $('#file-selected').empty();
             $( "#remove-image" ).show();
             $( "#custom-file-upload" ).hide();
             $( "#uploadImage" ).hide();
             $( "#button" ).hide();
            }
          },
         error: function(result)  {
              $("#err").html("errorcity").fadeIn();
          }      
     });
   });

  $("#remove-image").click(function(){
    //Make ajax call here:
    $.ajax({
          url: "/remove-image.php",
          type: 'POST',
          processData: false, // important
          contentType: false, // important
       success: function(result) {
            if(result=='gone') {
             $("#image").attr('src', '/images/no-image.png');
             $('#file-selected').empty();
             $( "#custom-file-upload" ).show();
             $( "#remove-image" ).hide();
             $( "#uploadImage" ).hide();
             $( "#button" ).hide();
            } else {
                $("#err").html("sorry"+result).fadeIn();
            }
          },
         error: function(result)  {
              $("#err").html("error").fadeIn();
          }      
     });
   });

  });

这是 AJAX 调用的 PHP 脚本（即 upload-image-ajax.php）：

<?php
require_once("includes/session.php");
$poolid=strtolower($_SESSION['poolid']); //lowercase it first so we get exact matches
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions

if(isset($_FILES['image'])) {
    $img = $_FILES['image']['name'];
    $tmp = $_FILES['image']['tmp_name'];

    // get uploaded file's extension
    $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

    //checking if image exists for this pool and removing if so, before adding new image in its place
    if(file_exists("uploads/".$poolid.".png")) {
     unlink("uploads/".$poolid.".png");
    }

    // checks valid format
    if(in_array($ext, $valid_extensions))  { 
    //re-size the image and make it a PNG before sending to server
    $final_image = $poolid . ".png";
    $path = "uploads/".strtolower($final_image); 
    $size = getimagesize($tmp);
    $ratio = $size[0]/$size[1]; // width/height
    if( $ratio > 1) {
        $width = 200;
        $height = 200/$ratio;
    }
    else {
        $width = 200*$ratio;
        $height = 200;
    }
    $src = imagecreatefromstring(file_get_contents($tmp));
    $dst = imagecreatetruecolor($width,$height);
    imagecopyresampled($dst,$src,0,0,0,0,$width,$height,$size[0],$size[1]);
    imagedestroy($src);
    imagepng($dst, $path); // adjust format as needed
    imagedestroy($dst);
    $_SESSION['image_uploaded']="yes";
    echo $path ."?".rand(1,32000); 
    } else {
      echo 'invalid file';
    }
}
?>

Answer 1

只需在文件输入 change 事件中添加图片上传 AJAX 调用。这应该会在用户选择图片后立即上传您的图片。

$(document).ready(function() {

  $('#uploadImage').on('change', function() {

    var fileName = '';
    fileName = $(this).val();
    $('#file-selected').html(fileName);


    var imageData = new FormData();
    imageData.append('image', $('#uploadImage')[0].files[0]);

    //Make ajax call here:
    $.ajax({
      url: '/upload-image-ajax.php',
      type: 'POST',
      processData: false, // important
      contentType: false, // important
      data: imageData,
      beforeSend: function() {
        $("#err").fadeOut();
      },
      success: function(result) {
        if (result == 'invalid file') {
          // invalid file format.
          $("#err").html("Invalid File. Image must be JPEG, PNG or GIF.").fadeIn();
        } else {

          // view uploaded file.
          $("#image").attr('src', '/' + result);
          /* $("#preview").html(data).fadeIn();*/
          /* $("#form")[0].reset(); */
          //show the remove image button
          $('#file-selected').empty();
          $("#remove-image").show();
          $("#custom-file-upload").hide();
          $("#uploadImage").hide();
          $("#button").hide();
        }
      },
      error: function(result) {
        $("#err").html("errorcity").fadeIn();
      }
    });

  });

});

Answer 2

您可以通过使用 ajax 或调用表单的提交事件来调用将执行此操作的函数。

要调用此函数，请在 file/img 标记中放置一个 onchange 事件（仅当 img 用于显示所选图像的预览时才使用 img）

Code

如何在选择文件后立即上传图片，而不是强制用户单击单独的 "Upload" 按钮？

How to upload image immediately after file is selected, rather than force user to click separate "Upload" button?

javascript

php

ajax

jquery

image-uploading