2016-10-04 20 views
-3

ユーザーが画像をアップロードしない限り、画像ホルダーにデフォルト画像が表示されるようにします。そのページからの印刷が行われるとデモユーザー画像はそれを行う方法?画像が画像ホルダーにアップロードされるまでデフォルト画像を表示

//Html Part 
<div class="form-group uploader"> <label class="coole">Upload Child's Image:</label> 
     <input name="fileToUpload" type="file" id="fileToUpload" /><br /> 
     <div name="image-holder" id="image-holder"> </div> 
    //Js Part 
    <script> 
     $("#fileToUpload").on('change', function() { 

      if (typeof (FileReader) != "undefined") { 
       var image_holder = $("#image-holder"); 
       image_holder.empty(); 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        $("<img />", { 
         "src": e.target.result, 

         "class": "thumb-image", 
         "width":"113px", 
         "height":"151px" 
        }).appendTo(image_holder); 

       } 

       image_holder.show(); 


       reader.readAsDataURL($(this)[0].files[0]); 
      } else { 
       alert("This browser does not support FileReader."); 
      } 
     }); 
     </script> 

答えて

0

試してみてください。

<div class="form-group uploader"> <label class="coole">Upload Child's Image:</label> 
    <input name="fileToUpload" type="file" id="fileToUpload" /><br /> 
    <div name="image-holder" id="image-holder"><img src='path-to-placeholder-img" class="placeholder"/> </div> 
//Js Part 
<script> 
    $('#image_holder').show(); 
    $("#fileToUpload").on('change', function() { 

     if (typeof (FileReader) != "undefined") { 
      var image_holder = $("#image-holder"); 
      image_holder.empty(); 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $("<img />", { 
        "src": e.target.result, 
        "class": "thumb-image", 
        "width":"113px", 
        "height":"151px" 
       }).appendTo(image_holder); 
       $('.placeholder').hide(); 

      } 
      reader.readAsDataURL($(this)[0].files[0]); 
     } else { 
      alert("This browser does not support FileReader."); 
     } 
    }); 
    </script> 
+0

@abhishekのシンその答えはあなたのために働いていた場合、私の応答を投票してください – Austin

関連する問題