画像プレビューajax経由でphpファイルに送信

画像プレビューオプションを使用すると、選択した画像のサムが表示されます。画像プレビューajax経由でphpファイルに送信

HTML以下、

HTML考えてみましょう：

<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage[]" />

コードは、ブラウザで画像をプレビューするために使用：

$(document).ready(function() { 
    if (window.File && window.FileList && window.FileReader) { 
    $("#gallery").on("change", function(e) {   
     var fileName = document.getElementById("gallery").value; 
     var idxDot = fileName.lastIndexOf(".") + 1; 
     var extFile = fileName.substr(idxDot, fileName.length).toLowerCase(); 
     if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){ 
     //TO DO 
     var files = e.target.files, 
     filesLength = files.length; 
     for (var i = 0; i < filesLength; i++) { 
      var f = files[i] 
      var fileReader = new FileReader(); 
      fileReader.onload = (function(e) { 
       var file = e.target; 
       $("<span class=\"imgPreview\">" + 
       "<img id=\"image\" name=\"image[]\" class=\"imageThumb\" src=\"" + e.target.result + "\"/>" + 
       "<span class=\"remove icon-error\" title=\"Close\"></span>" + 
       "</span>").insertAfter(".gallery_section"); 
       $(".remove").click(function(){ 
       $(this).parent(".imgPreview").remove(); 
       }); 
      }); 
      fileReader.readAsDataURL(f); 
     }   
     }else{ 
      alert("Only jpg/jpeg and png files are allowed!"); 
     } 
     }); 
    } else { 
    alert("Your browser doesn't support to File API") 
    } 
});

を上記のhtmlのファイルを選択すると、すべてが正常に動作している間。私は複数の画像を選択することができ、私はajax経由でその複数の画像をアップロードすることができます。

AJAX：

var formData = new FormData($("#room_form")[0]); 

var url=$("#room_form").attr("action"); 

$.ajax({ 
    method: "POST", 
    data: formData, 
    url: url, 
    cache: false, 
    contentType: false, 
    processData: false, 
}) 
.success(function(data) { 
    loaderHide(); 

    setTimeout(function() { 
     window.location.reload(); 
    }, 1000); 


}). 
fail(function(data) { 
    loaderHide(); 
});

上記のすべてが正常に動作します。

問題：

私は3つのファイルを選択します。プレビューで3つのファイルを表示しています。もう一度2つのファイルを選択して、プレビューで合計5つのファイルを表示します。しかし、<input type="file"には2つのファイルしかありません。私は検索し、それがデフォルトの動作であることがわかりました。試み

： プレビュー画像：

プレビューコード：ベース64符号化された画像などの原画像を有する画像ソースIMで

。私はこのイメージをphpファイルに送る必要があります。これどうやってするの？

出典

2017-12-26 arun kumar

デモを生きる共有しますか？または完全なコード？私はプレビューのコードを見つけることができませんか？ – OIIO

@wowコードが 'preview code'で更新されました –

ここでは別のIDを使ってライブデモをしてみませんか？' gallery_img'！= 'gallery' – OIIO

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
</head> 
 
<body> 
 
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage" /> 
 
<div class="gallery_section"> 
 
</body> 
 
<script> 
 
$(document).on('change','#gallery_img',function(evt){    
 
      var files = evt.target.files; // FileList object 
 

 
      // Loop through the FileList and render image files as thumbnails. 
 
      for (var i = 0, f; f = files[i]; i++) { 
 

 
       // Only process image files. 
 
       if (!f.type.match('image.*')) { 
 
       return; 
 
       } 
 

 
       var reader = new FileReader(); 
 

 
       // Closure to capture the file information. 
 
       reader.onload = (function(theFile) { 
 
       return function(e) { 
 
        // Render thumbnail. 
 
$('.gallery_section').append('<span class="imgPreview"><img id="image" name="image[]" class="imageThumb" src="'+e.target.result+'"><span class="remove icon-error" title="Close"></span></span>'); 
 
       }; 
 
       })(f); 
 
       // Read in the image file as a data URL. 
 
       reader.readAsDataURL(f); 
 
      }   
 
      }); 
 
</script> 
 
</html>

出典

2017-12-26 13:06:22 Jalin

画像プレビューajax経由でphpファイルに送信

答えて

関連する問題