アップロードの前後にイメージをプレビューする方法は？

私は形で画像や写真をプレビューしようが、それは動作しませんし、以下のように、このようなHTMLコードを見て：アップロードの前後にイメージをプレビューする方法は？

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

：以下

<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コード/スクリプト

私のフォーム上の2つの主要な質問があります
1.Whyないの画像や映像作品のプレビュー？
2.保存ボタンをクリックしたときにフォームから写真を貼り付ける方法は、作成した別のPHPまたはPHPページにリンクしますか？

出典

2013-04-25 JCChan

[アップロードする前に画像をプレビュー]（0120-13-0901）画像は – Kakitori

これを試してみてください（プレビュー用）

<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

meVeekayの答えは良かったし、ちょうどそれがより多くの2つの物事を行うことにより、即興で作っています。

ブラウザが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

アップロードの前後にイメージをプレビューする方法は？

答えて

関連する問題