2017-10-01 12 views
0

"Choose Image"をクリックする画像アップロードフォームがあり、ファイル選択ウィンドウが表示されます。画像を選択すると、新しく表示された「アップロード」ボタンの横にファイル名が画面に表示されます(画像ではなく、ファイル名のみ)。次に、「アップロード」をクリックして、イメージを真にアップロードしてプレビューウィンドウに表示させる必要があります。ファイルを選択した直後に画像をアップロードするには、別の「アップロード」ボタンをクリックする必要がありますか?

誰かが「画像を選択」をクリックしてアップロードしたい画像を選択すると、中間の人物が削除され、すぐに画像がアップロードされ、プレビューウィンドウに画像が表示されるように、このプロセスを凝縮したいと思います。なぜユーザーは「アップロード」をクリックしなければなりませんか?

以下に関連コードを記載しました。既存のコードを微調整してファイルを選択した直後にアップロードを行う方法はありますか?それとも、私がしたいことをするためにゼロから始めなければならないのでしょうか?

画像のアップロードフォーム:

<?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'; 
    } 
} 
?> 

答えて

1

:これは、AJAX呼び出しPHPスクリプト(すなわちupload-image-ajax.php)がある

$(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(); 
      }  
    }); 
    }); 

    }); 

:これはJS

<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> 

がページにもありますあなたの画像をアップロードするだけでAJAXファイルの中にchange eベント。これは、ユーザーが画像を選択した直後に画像をアップロードする必要があります。

$(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(); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

1

あなたはどちらかのAJAXを使用することによって、そうか、フォームの提出イベントを起動する関数を呼び出すことができます。この関数を呼び出すために

は(IMGは、選択された画像のプレビューを表示するために使用されている場合にのみ使用IMG)をファイル/ imgタグ内のonchangeイベントを入れ

Code

関連する問題