0

ユーザーが画像をアップロードできるようにする入力->タイプ->ファイルボタンがあります。送信（アップロード）する前に画像をプレビューしようとしています。誰でも私が解決するのを手伝ってくれますか? (送信をクリックする前に) div (プレビュー用) に合わせて画像のサイズを変更するにはどうすればよいですか?

CSS

#preview_box{
    margin-top:10px;
    margin-left:10px;
    float:left;
    display:inline;
    text-align:center;
    height:408px;
    width:490px;
    position:relative;
    border: 1px solid #adadad; /* stroke */
    background-color: #fff; /* layer fill content */
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.22); /* drop shadow */
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.22); /* drop shadow */
    box-shadow: 0 1px 6px rgba(0,0,0,.22); /* drop shadow */
}

html

<div id="preview_box">This is a preview</div>

<form id="imageform" enctype="multipart/form-data" method="post" action="/help/upload.php">                     
      <input name="photoimg" id="photoimg" type="file"/>
</form>

jquery

$("input[name='photoimg']").on("change", function(){
  var files = !!this.files ? this.files : [];
  // If no files were selected, or no FileReader support, return
  if ( !files.length || !window.FileReader ) return;
  // Only proceed if the selected file is an image
 if ( /^image/.test( files[0].type ) ) { 
  // Create a new instance of the FileReader
    reader = new FileReader();
   // Read the local file as a DataURL
    reader.readAsDataURL( files[0] );
   // When loaded, set image data as background of page
     reader.onloadend = function(){
    $("#preview_box").css("background-image", "url(" + this.result + ")");
      }
   }
});

ありがとう。（画像のリサイズ時に縦横比を保てたら最高です）

4

1 に答える 1

0

...アップロードする前にプレビューする

ほとんどのブラウザの最新バージョンで実行できます。見る：

フォームを介してアップロードする前にローカル画像をプレビューすることは可能ですか？

ただし、下位互換性のために、ajaxを介して画像をアップロードし、別のダイアログで画像のサイズ変更と切り抜きを実行することをお勧めします。

于 2013-03-01T09:36:38.917 に答える