index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
        <script src="javascripts/jquery-1.4.2.min.js"></script>
        <script src="javascripts/jquery.imgareaselect.js"></script>
        <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<body>
<div id='preview'>
<?
        echo '<img height=297 width=216 id="prev_img" src="images/preview.png?salt=' . rand() . '" />'
?>
</div>
<input type='button' id='scan_preview' value='Предворительный просмотр'>
<hr />

<form id="params">
        <select name='mode'>
                <option value='auto'>auto(Color)</option>
                <option value='Halftone'>Halftone</option>
                <option value='Gray'>Gray</option>
                <option value='Lineart'>Lineart</option>
                <option value='Color'>Color</option>
        </select>
        <select name='resolution'>
                <option value='auto'>auto(300dpi)</option>
                <option value='50'>50</option>
                <option value='75'>75</option>
                <option value='100'>100</option>
                <option value='150'>150</option>
                <option value='200'>200</option>
                <option value='300'>300</option>
                <option value='450'>450</option>
                <option value='600'>600</option>
        </select>
</form>
<input type='button' id='scan_image' value='Сканировать'>
<div style="overflow:auto;height:400px" id='images'>
<?
        $dir = opendir("images/");
        while($file = readdir($dir)) {
                if($file != '.' && $file != '..' && $file != 'preview.png'){
                        echo "<div id='$file' style='float:left'><img height=297 width=216 src='images/$file?salt=".rand()."' /><input  class='delete_button' type='button' value='Удалить'></div>";
                }
        }
        closedir($dir);
?>
</div>
<script>
$(function(){
        $('input.delete_button').click(function(){
                var div = $(this).parent();
                $.ajax({
                        type:'POST',
                        url:'/delete_image.php',
                        data:{file_name : div.attr('id')},
                        dataType:'json',
                        success:function(data, textStatus, XMLHttpRequest){
                                if(data.success){
                                        div.remove();
                                }
                        }
                });
        });
        var image_select = $('#prev_img').imgAreaSelect({ x1: 0, y1: 0, x2: 216, y2: 297,instance: true });
        $('#scan_preview').click(function(){
                $.ajax({
                        type:'POST',
                        url:'/scan_image.php',
                        data:{
                                preview : 1
                        },
                        dataType:'json',
                        success:function(data, textStatus, XMLHttpRequest){
                                if(data.success){
                                        $('#prev_img').attr('src','images/preview.png?salt=' + Math.random());
                                }
                        }
                });
        });

        $('#scan_image').click(function(){
                var data = {};
                $('#params input,select').each(function(index,el) {
                        data[el.name] = el.value;
                });
                data['l'] = image_select.getSelection().x1;
                data['t'] = image_select.getSelection().y1;
                data['x'] = image_select.getSelection().width;
                data['y'] = image_select.getSelection().height;
                $.ajax({
                        type:'POST',
                        url:'/scan_image.php',
                        data:data,
                        dataType:'json',
                        success:function(data, textStatus, XMLHttpRequest){
                                if(data.success){
                                        $('#images').append("<div id='" + data.file_name + "' style='float:left'><img height=297 width=216 src='images/" + data.file_name + "?salt=" +Math.random() + "' /><input  class='delete_button' type='button' value='Удалить'></div>");
                                }
                        }
                });
        });
});
</script>
</body>
</html>