업로드 전후에 이미지를 미리 보는 방법은 무엇입니까?

이 나는 형태의 이미지 또는 사진을 미리보기 할 것이다, 그러나 그것은 작동하지 않고 아래와 같은 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.Why하지 않습니다 이미지 또는 사진 작업의 미리보기?
2. 저장 버튼을 클릭 할 때 양식에서 사진을 붙여 넣는 방법은 내가 만든 다른 PHP 또는 PHP 페이지로 이동하거나 링크됩니까?

출처

2013-04-25 JCChan

[업로드하기 전에 이미지 미리보기] (0120-555-503) 무료 솔루션 : – Kakitori

이 시도 : meVeekay의 대답이 좋았다 그냥 더이 일을 수행하여 즉석에서 만드는 중이

<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>

작업 데모 here>

출처

2013-04-25 06:13:00

귀하의 솔루션은 실제로 작동합니다. 하지만,'

이것은 ... 즉, 그 해결책이 아닙니다. –

@ meVeekay, 위의 솔루션에서 최대 이미지 수를 설정할 수 있습니까? – Super

    ####################### 
        ### 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 
    } 
    ?>

출처

2013-04-25 06:43:46

이것은 nextimg 페이지에서 실제로 작동하지 않습니다. 이미지가 표시되고 미리보기되지 않았습니다. 모든 데이터베이스가 관련되어 있습니까? 그렇지 않다면 물론 프로젝트가 클라이언트 - 서버에서 실행되는 추세입니다. – JCChan

(미리보기).

브라우저가 HTML5 FileReader()를 지원하는지 여부를 확인하십시오.
확장명을 확인하여 이미지 파일 만 업로드하도록 허용합니다.

HTML :

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

jQuery를 :을 FileReader()의 상세한 이해를 위해

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

확인이 Article : Using FileReader() preview image before uploading.

출처

2015-06-04 11:18:29

업로드 전후에 이미지를 미리 보는 방법은 무엇입니까?

답변

관련 문제