이미지 미리보기 ajax를 통해 PHP 파일로 보내기

선택한 이미지의 엄지 손가락을 보여주는 이미지 미리보기 옵션이 있습니다. 모두가 잘 작동 위의 HTML을 사용하여 파일을 선택하는 동안이미지 미리보기 ajax를 통해 PHP 파일로 보내기

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

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

코드는 브라우저에서 이미지를 미리보기 위해 사용 :

는 아래의 HTML,

HTML을 고려하십시오. 마치 여러 이미지를 선택할 수 있고 아약스를 통해 여러 이미지를 업로드 할 수 있습니다.

아약스는 :

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 인코딩 된 이미지와 원본 이미지를 갖는 영상 소스 메신저에

. 이 이미지를 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 파일로 보내기

답변

관련 문제