アップロードする前にプレビュー画像を作成する方法Jquery - Ajax

こんにちはフレンズ。アップロードする前にプレビュー画像を作成する方法Jquery - Ajax

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="jquery.min.js"></script> 
    <script> 
    $(function(){ 
     $("#file").on("change", function(){ 
      /* Limpiar vista previa */ 
      $("#vista-previa").html(''); 
      var archivos = document.getElementById('file').files; 
      var navegador = window.URL || window.webkitURL; 
      /* Recorrer los archivos */ 
      for(x=0; x<archivos.length; x++) 
      { 
       /* Validar tamaño y tipo de archivo */ 
       var size = archivos[x].size; 
       var type = archivos[x].type; 
       var name = archivos[x].name; 
       if (size > 1024*1024) 
       { 
        $("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>"); 
       } 
       else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif') 
       { 
        $("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>"); 
       } 
       else 
       { 
       var objeto_url = navegador.createObjectURL(archivos[x]); 
       $("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>"); 
       } 
      } 
     }); 

     $("#btn").on("click", function(){ 
      var formData = new FormData($("#formulario")[0]); 
      var ruta = "multiple-ajax.php"; 
      $.ajax({ 
       url: ruta, 
       type: "POST", 
       data: formData, 
       contentType: false, 
       processData: false, 
       success: function(datos) 
       { 
        $("#respuesta").html(datos); 
       } 
      }); 
      }); 

    }); 
    </script> 
</head> 
<body> 
<form method="post" id="formulario" enctype="multipart/form-data"> 
    Subir imagen: <input type="file" id="file" name="file[]" multiple> 
    <button type="button" id="btn">Subir imágenes</button> 
</form> 
    <div id="vista-previa"></div> 
    <div id="respuesta"></div> 
</body> 
</html>

は前にローダーを実装するために

が私を助けてください、プレビュー画像を表示する前に同様のFacebookのローダーを示しています。

表示は、プレビュー画像

これを表示する前にローダーは、コードです表示画像のプレビューを取得する

出典

2016-04-09 Josues

あなたを願っていますし、サーブローダーで？アニメーションを読み込んで処理しているように見せていると思っています。おそらくアップロードしていますか？このプレビューはすべてJSベースであるため、画像を見るときに実際にアップロードする必要はないため、常に瞬時に表示する必要があります。 –

@GregBorbonusこのコードはjquery ajaxで更新されました。フレンド...ビュー画像のプレビューを表示する前にローダーを実装するのを手伝ってください。 – Josues

Facebookのスタイルの写真のアップロード、私はあなたが正確に何を意味する

挨拶

$(document).ready(function() { 

    $("#uploadTrigger").on('click', function(event) { 
     $("#file-id").trigger('click'); 
    }); 

//$('.hidden').removeClass('hidden').addClass('active'); 

$(":file").change(function() { 

    var file = this.files[0], name = file.name, size = file.size, type = file.type; 
    //Your validation 
    var imageType = new Array("image/png","image/jpeg", "image/gif", "image/bmp"); 

    if(jQuery.inArray(type, imageType) == -1) { 
     $("#status_msg").html("Valid file formats are: jpg, jpeg,png, gif").css('color', '#F00000'); 
     return false; 
    } else { 

     $("#status_msg").html(" "); 
     if ($("#file-id").val() !== '') { 
      var formData = new FormData($('form')[0]); 

      $.ajax({ 
       url: 'upload', //Server script to process data 
       type: 'POST', 
       //Ajax events 
       beforeSend: function() { 
        $('#profileImg').addClass('profile-image-loading') 
            .removeClass('profile-image') 
            .attr('src', '/assets/img/fb_loading.gif'); 
       }, 
       success: function (data) { 

        if (data.status) { 
         var reader = new FileReader(); 
         reader.onload = function (e) { 

         $('.profile-image-loading') 
          .addClass('profile-image') 
          .removeClass('profile-image-loading') 
          .attr('src', e.target.result); 
          return false; 
         } 
         reader.readAsDataURL(file); 

         $("#status_msg").html(data['msg']).css('color', '#009900'); 
        } else { 
         $("#status_msg").html(data['msg']).css('color', '#F00000'); 
         return false; 
        } 
       }, 
       // Form data 
       data: formData, 
       //Options to tell jQuery not to process data or worry about content-type. 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 
     } else { 
     alert("Please select valid image."); 
     return false; 
     } 
     } 

}); 

});

出典

2016-07-01 04:37:40

解決策はdivを作成し、内側にgif画像を配置することです。デフォルトでは、div内の画像は非表示になっていますが、何かを送るためにクリックすると、「読み込み中」が表示されます。これを終え、ajaxが成功すると、プリローダーを削除できます。あなたのために私が作成した例を確認してください：PHP + jQueryの+ Ajaxの

を使用して

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <style> 
     #preloader{ 
     display: none; 
     } 
    </style> 
    </head> 
    <body> 
    <!-- PRELOADER --> 
    <div id="preloader"></div> 

    <form method="post" id="formulario" enctype="multipart/form-data"> 
     Subir imagen: <input type="file" id="file" name="file[]" multiple> 
     <button type="button" id="btn">Subir imágenes</button> 
    </form> 
    <div id="vista-previa"></div> 
    <div id="respuesta"></div> 


    <script src="jquery.min.js"></script> 
    <script> 
     $(function(){ 
     $("#file").on("change", function(){ 
      /* Limpiar vista previa */ 
      $("#vista-previa").html(''); 
      var archivos = document.getElementById('file').files; 
      var navegador = window.URL || window.webkitURL; 
      /* Recorrer los archivos */ 
      for(x=0; x<archivos.length; x++) 
      { 
       /* Validar tamaño y tipo de archivo */ 
       var size = archivos[x].size; 
       var type = archivos[x].type; 
       var name = archivos[x].name; 
       if (size > 1024*1024) 
       { 
        $("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>"); 
       } 
       else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif') 
       { 
        $("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>"); 
       } 
       else 
       { 
       var objeto_url = navegador.createObjectURL(archivos[x]); 
       $("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>"); 
       } 
      } 
     }); 

     $("#btn").on("click", function(){ 
      var formData = new FormData($("#formulario")[0]); 
      var ruta = "multiple-ajax.php"; 

      // Load a preloader 
      $("#preloader").show(); 

      $.ajax({ 
       url: ruta, 
       type: "POST", 
       data: formData, 
       contentType: false, 
       processData: false, 
       success: function(datos) 
       { 
        // When you ajax give success, you can "remove" your preloader 
        // You can create your preloader in http://preloaders.net 
        // put inside div "preloader" and use it. 
        $("#preloader").fadeOut(); // You can use to slideUp; fadeIn/fadeOut; hide 


        $("#respuesta").html(datos); 
       } 
      }); 
      }); 
    }); 
    </script> 
</body> 
</html>

出典

2016-04-10 01:22:45

[ここのリンク]（https：// jsfiddle.net/35huqsyc/） – Josues

アップロードする前にプレビュー画像を作成する方法Jquery - Ajax

答えて

関連する問題