cách xem trước hình ảnh trước và sau khi tải lên?

tôi sẽ xem trước một hình ảnh hoặc hình ảnh trong một hình thức, nhưng nó không hoạt động và giao diện HTML code như thế này như sau:cách xem trước hình ảnh trước và sau khi tải lên?

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

và đưa JS mã/script dưới đây:

<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); 
    } 
    }); 
});

Có 2 câu hỏi chính về biểu mẫu của tôi:
1.Tại sao bản xem trước của hình ảnh hoặc hình ảnh không hoạt động?
2.Làm thế nào để dán ảnh từ biểu mẫu khi nút lưu được nhấp, nó sẽ đi/liên kết đến một trang php hoặc php khác mà tôi đã tạo?

Nguồn

2013-04-25 JCChan

bản sao có thể có của [Xem trước hình ảnh trước khi được tải lên] (http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Kakitori

Hãy thử điều này: (Đối với Preview)

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

Working Demo here>

Nguồn

2013-04-25 06:13:00

Giải pháp của bạn thực sự hoạt động , nhưng nó sẽ làm việc nơi các pic hoặc hình ảnh mà tôi tải lên liên kết đến một trang khác theo mã như '

Điều này không làm việc trong tức là ... bất kỳ giải pháp cho điều đó? –

@meVeekay, chúng tôi có thể đặt số lượng hình ảnh tối đa trong giải pháp trên của bạn không? – 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 
    } 
    ?>

Nguồn

2013-04-25 06:43:46

Điều này không thực sự hoạt động trên trang nextimg, hình ảnh không được hiển thị và xem trước. Nó có liên quan đến bất kỳ cơ sở dữ liệu nào không? Nếu không, tất nhiên, dự án của tôi là xu hướng chạy ở máy khách-máy chủ. – JCChan

câu trả lời meVeekay là tốt và đang chỉ làm cho nó thêm ứng bằng cách làm 2 việc.

Kiểm tra xem trình duyệt có hỗ trợ HTML5 FileReader() hay không.
Chỉ cho phép tải lên tệp hình ảnh bằng cách kiểm tra tiện ích mở rộng của tệp đó.

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

Đối với chi tiết sự hiểu biết về FileReader()

Kiểm tra này Article : Using FileReader() preview image before uploading.

Nguồn

2015-06-04 11:18:29

cách xem trước hình ảnh trước và sau khi tải lên?

Trả lời

Các vấn đề liên quan