Question

如何将图片上传到我的表单，然后刷新包含上传图片的div，而不是重新加载整个页面并丢失之前的输入？

最好，我希望脚本通过AJAX将图像上传到临时文件夹然后使用PHP来读取文件夹并填充div，但是如何触发这个/将其与上传按钮关联而不重新加载整个页面？

HTML：

        <div class="lightBoxGallery">
            <?php

            $dir = './templates/attachments/'.$_SESSION['Holidex'].'/temp/';

            if (!file_exists($dir)) {
                //mkdir($dir, 0777);
                echo "<p>No attachments yet.</p>";

            } else {

                $handle = opendir($dir);
                $blacklist = array('.', '..', 'thumbs', 'default', 'default.php');
                while (false !== ($file = readdir($handle))) 
                {
                    if (!in_array($file, $blacklist)) 
                    {
                        echo    "<a href=\"".$dir."/".$file."\" title=\"".$file."\" data-gallery=\"\"><img src=\"./templates/attachments/".$_SESSION['Holidex']."/".$_GET['mod_id']."/".$file."\" style=\"height:100px; width:100px;\"></a>
                        ";
                    }
                }
                closedir($handle);

                echo "
                <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
                <div id=\"blueimp-gallery\" class=\"blueimp-gallery\">
                    <div class=\"slides\"></div>
                    <h3 class=\"title\"></h3>
                    <a class=\"prev\">‹</a>
                    <a class=\"next\">›</a>
                    <a class=\"close\">×</a>
                    <a class=\"play-pause\"></a>
                    <ol class=\"indicator\"></ol>
                </div>          
                <script src=\"../../plugins/blueimp/jquery.blueimp-gallery.min.js\"></script>";
            }
            ?>
        </div>
        <!-- /.lightbox gallery -->

      </div>
      <!-- /.col-md-12 -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <div>
            <font>Attachments (.jpg, .png, .bmp):</font>
            <input name="upload[]" type="file" accept="image/*" multiple />
            <p class="help-block">Max. filesize 5MB</p>
        </div>
    </div>
</div>
<!-- /.box -->

如果有人能指出我正确的方向，我将不胜感激，谢谢。

编辑：我看了Pawa Sen的重新加载方法，但是无法让它工作。 JS正在将更改后的数据移交给我的ajax.php脚本，根据谷歌Chrome的说法，事情就会消失，因为没有回复。

AJAX.php

if (isset($_POST['action']) && $_POST['action'] == "upload_pics") {

    // check if any attachments have been selected
    if(count($_FILES['upload']['name']) > 0){

        // loop through each file, get name and filepath
        for($i=0; $i<count($_FILES['upload']['name']); $i++) {
            $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

            // check whether a filepath is defined
            if($tmpFilePath != ""){

                // set filenames and path
                $filePath = "./attachments/".$_SESSION['Holidex']."/temp/";
                $shortname = date('d-m-Y-H-i-s').'-'.$_FILES['upload']['name'][$i];

                // check whether folder exists, otherwise create
                if (!file_exists($filePath)) {
                    mkdir($filePath, 0755, true);
                }

                // resize image to max 800px
                $maxDim = 800;
                list($width, $height, $type, $attr) = getimagesize( $tmpFilePath );
                if ( $width > $maxDim || $height > $maxDim ) {
                    $target_filename = $_FILES['upload']['tmp_name'][$i];
                    $fn = $_FILES['upload']['tmp_name'][$i];
                    $size = getimagesize( $fn );
                    $ratio = $size[0]/$size[1]; // width/height
                    if( $ratio > 1) {
                        $width = $maxDim;
                        $height = $maxDim/$ratio;
                    } else {
                        $width = $maxDim*$ratio;
                        $height = $maxDim;
                    }
                    $src = imagecreatefromstring( file_get_contents( $fn ) );
                    $dst = imagecreatetruecolor( $width, $height );
                    imagecopyresampled( $dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1] );
                    imagedestroy( $src );
                    imagepng( $dst, $target_filename ); // adjust format as needed
                    imagedestroy( $dst );
                }

                //Upload the file into the temp dir
                if(move_uploaded_file($tmpFilePath, $filePath.$shortname)) {

                    $files[] = $shortname;  
                }
            }
        }
    }

}

使用Javascript：

<script type="text/javascript" language="javascript"> 
$(function () {
    $("#upload").change(function () {                                           
        $.ajax({
            url: "ajax.php",
            type: "POST",
            async: true, 
            data: { action:"upload_pics",upload:$(this).val()}, // form data to post goes here as a json object
            dataType: "html",
            success: function(data) {
                $("#lightBoxGallery").load(location.href + " #lightBoxGallery");
            },
        });
    });
});
</script>

将图片附加到表单，仅重新加载图库div

0 个答案: