как просмотреть изображение до и после загрузки?


Я собираюсь просмотреть изображение или фотографию в форме, но это не работает, и HTML-код выглядит так, как показано ниже:

<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm">
    <p><label for="image">Upload Image:</label>
    <input type="file" id="imageUpload"/></p>
    <p><button type="submit" class="button">Save</button></p>
        <div id="preview">
            <img width="160px" height="120px" src="profile pic.jpg" id="thumb" />
        </div>
    </form>

И включил JS-код/скрипт ниже:

<script type="text/jaavascript">
$(document).ready(function(){
    var thumb=$('#thumb');
    new AjaxUpload('imageUpload',{
    action:$('newHotnessForm').attr('action'),
    name:'image',
    onSubmit:function(file,extension){
        $('#preview').addClass('loading');
    },
    onComplete:function(file,response){
        thumb.load(function(){
            $('#preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src',response);
    }
    });
});

В моей форме есть 2 основных вопроса:
1. Почему не работает предварительный просмотр изображения или картинки?
2. Как вставить фотографию из формы при нажатии кнопки сохранить, она перейдет/ссылка на другой php или страницу php, которую я создал?

Author: Jonathan Root, 2013-04-25

3 answers

Попробуйте это: (Для предварительного просмотра)

<script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

Рабочая демонстрация здесь>

 65
Author: Vijaya Pandey, 2013-04-25 06:13:00

Ответ Мевикея был хорошим, и я просто делаю его более импровизированным, делая 2 вещи.

  1. Проверьте, поддерживает ли браузер HTML5 FileReader() или нет.

  2. Разрешить загрузку только файла изображения, проверив его расширение.

HTML :

<div id="wrapper">
    <input id="fileUpload" type="file" />
    <br />
    <div id="image-holder"></div>
</div> 

JQuery (запрос) :

$("#fileUpload").on('change', function () {

    var imgPath = $(this)[0].value;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();

    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        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"
                }).appendTo(image_holder);

            }
            image_holder.show();
            reader.readAsDataURL($(this)[0].files[0]);
        } else {
            alert("This browser does not support FileReader.");
        }
    } else {
        alert("Pls select only images");
    }
});

Для более подробного понимания FileReader()

Проверьте это Статья: Использование FileReader() для предварительного просмотра изображения перед загрузка.

 5
Author: Satinder singh, 2015-06-04 11:18:29
                    #######################
                    ###  the img page   ###
                    #######################


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#f').live('change' ,function(){
           $('#fo').ajaxForm({target: '#d'}).submit();
                      });


    });
// });
</script>
<form id="fo" name="fo" action="nextimg.php" enctype="multipart/form-data" method="post">
 <input type="file" name="f" id="f" value="start upload" />
<input type="submit" name="sub" value="upload"/>
</form>
<div id="d"></div>





                    #############################
                    ###    the nextimg page   ###
                    #############################




     <?php

     $name=$_FILES['f']['name']; 
     $tmp=$_FILES['f']['tmp_name'];
     $new=time().$name;
     $new="upload/".$new;
     move_uploaded_file($tmp,$new);
     if($_FILES['f']['error']==0)
      {

     ?>
     <h1>PREVIEW</h1><br /><img src="<?php echo $new;?>" width="100" height="100"/>
     <?php
     }
     ?>
 2
Author: ayan sil, 2013-04-25 07:18:15