Ibrahim Hassan 1234 Ответов: 1

Как сделать предварительный просмотр изображения, прежде чем представить

$(function(){
    Test = {
        UpdatePreview: function(obj){
          // if IE < 10 doesn't support FileReader
          if(!window.FileReader){
             // don't know how to proceed to assign src to image tag
          } else {
             var reader = new FileReader();
             var target = null;

             reader.onload = function(e) {
              target =  e.target || e.srcElement;
             $("#ImageId").attr("src", target.result);
			 };
              reader.readAsDataURL(obj.files[0]);
          }
        }
    };
});

мой html-код..............

Что я уже пробовал:

приведенный выше код-это то, что я попробовал, но изображение не отображается вообще

1 Ответов

Рейтинг:
10

Sandeep Mewara

Используйте JavaScript readAsDataURL() Метод.

Ссылаться: Как предварительный просмотр изображения перед передачей с использованием jQuery[^]
Вот, попробуй это:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Preview an Image Before it is Uploaded</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>

        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];
            if(file){
                var reader = new FileReader();
                reader.onload = function(){
                    $("#previewImg").attr("src", reader.result);
                }
     
                reader.readAsDataURL(file);
            }
        }
    </script>
    </head> 
    <body>
        <form action="confirmation.php" method="post">
            <p>
                <input type="file" name="photo" onchange="previewFile(this);" required>
            </p>
            <img id="previewImg" src="/examples/images/transparent.png" alt="Placeholder">
            <p>
                <input type="submit" value="Submit">
            </p>
        </form>
    </body>
    </html>

Ibrahim Hassan 1234

я очень ценю Ваш быстрый ответ, сэр, доктор профессор Сандип Мевара.