Jqueryが一時的な画像からヒットする

Question

私がやっていることは、プレビューのようなサムネイルとして表示される画像のアップロードフォームを作成することです。私はそれが表示され、次に私が望むサイズに切り取られるサーバー側のPHPで設定された幅を持っています。しかし、クライアントサイドのプレビューでは、指定した幅で表示したいが、指定された幅にサイズを変更してから画像の高さを取得し、javascriptで調整したい。とにかくここに私のコードがあります。私はおそらく何かが不足しているので、私は非常にJquery/javascript savyではありません。それが壊れた画像サイズ39pxのサイズを与えている瞬間

<script> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      var imgHeight = $(".previewlogo").height(); 

      reader.onload = function (e) { 
       $('.previewlogo') 
        .attr('src', e.target.result) 
       $('.droparea') 
        .attr('style', 'height:', imgHeight, 'px;') 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
} 

     </script> 

し、HTML

<img class="previewlogo" src="#" alt="Click or Drag image here to add login logo"/> 
<input type="file" class="droparea spot logoupload" name="logo" onchange="readURL(this);"/> 

。また、.attr（）タグでHTMLとコードを混在させる問題があるようですが、私は何かを見落としていると確信しています

Answer 1

イメージでは何もできません実際にサーバーにアップロードされるまでこれは、ローカルのファイルコンテンツとリモートコンテンツ（ほとんどのブラウザではno-no）を混在させるためです。変更ハンドラが画像を選択した直後（おそらくajaxファイルのアップロードメソッドを使用して）ファイルを送信してから、その結果のサーバイメージをサムネイルとして表示することをお勧めします。

Answer 2

jqueryでは、スタイルタイプの変更にattrを使用するよりも優れた方法があります。例えば、width()のようなcss（）関連の関数です。第二に、ジェイクはセキュリティ上の問題、または彼がそれを置く（ノー）ことについて正しい。いずれにせよ、あなたのJQueryも改善されるべきです、attrはスタイルではなく一般的なアクセス用です。また、スタイルアプリケーションを使用し、属性を直接追加しないことも検討する必要があります。