Как изменить размер изображения и просмотреть его перед загрузкой

Question

У меня есть кнопка ввода-> type-> file, которая позволяет пользователям загружать изображения. Я пытаюсь просмотреть изображение, прежде чем они смогут его отправить (загрузить). Может ли кто-нибудь помочь мне решить, как я могу изменить размер изображения (перед нажатием кнопки submit), чтобы поместить 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 + ")"); 
     } 
    } 
}); 

Спасибо. (это будет здорово, если я могу держать коэффициент пропорциональности при изменении размеров изображения)

Answer 1

... просмотреть его перед загрузкой

Может быть сделан в последних версиях большинства браузеров. См:

is it possible to preview local images before uploading them via a form?

Однако, для обеспечения обратной совместимости, я предлагаю вам загрузить изображения с помощью AJAX и выполнить изменение размера изображения + урожай в отдельном окне.