Question

我想实现概念网站访问者可以上传多个文件点击提交然后压缩文件上传服务器xampp。我正在使用PHP脚本语言。

Answer 1

您可以在Canvas API [仅限图片]的帮助下，在支持HTML5的浏览器中执行此操作。这是一个很好的例子

http://makeitsolutions.com/labs/jic/

HTML5 canvas refrences：

http://diveintohtml5.info/canvas.html

http://www.html5canvastutorials.com/

下面是虚拟代码：

HTML [检查jQuery路径]

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            .img_button{ height: 100%; width:100%}
            .img_submit{ border: 1px saddlebrown solid; height: 30px; margin-top: 100px}
            .box{ float: left; margin: 10px; width: 20%; height: 250px}
            .label{ float: left; background: #333; color: #fff; width: 100%; padding-left: 10px }
            img{float:left;}
        </style>
    </head>
    <body>
        <div class="box" id="box1">
            <input class="filename" type="file" id="1" style="display:none" />
            <input class="img_button" id="btn1" type="button" onclick="$('#1').trigger('click'); return false;" value="Image-1" />
        </div>
        <div class="box" id="box2">
            <input class="filename" type="file" id="2" style="display:none" />
            <input class="img_button" id="btn2" type="button" onclick="$('#2').trigger('click'); return false;" value="Image-2" />
        </div>
        <div class="box" id="box3">
            <input class="filename" type="file" id="3" style="display:none" />
            <input class="img_button" id="btn3" type="button" onclick="$('#3').trigger('click'); return false;" value="Image-3" />
        </div>
        <input class="img_submit" type="button" value="Upload" onclick="uploadFile();" />
        <script type="text/javascript">
            var imgCount = 1;
            $('.filename').change(function(){
                var file = this.files[0];
                var id = this.id;
                var reader = new FileReader();
                reader.onload = function(event) {
                    var i = document.createElement('img');
                    i.src = event.target.result;
                    i.id = 'img'+id;
                    i.onload = function(){
                        image_width=$(i).width(),
                        image_height=$(i).height();

                        if(image_width > image_height){
                            i.style.width="320px";
                        }else{
                            i.style.height="300px";
                        }
                        //i.style.display = "block";    
                    }
                    $('#img'+id).remove();
                    $('#box'+id).append(i);
                    $('#box'+id).prepend('<span class="label">'+$('#btn'+id).val()+'</span>');
                    $('#btn'+id).hide();
                    $(document).on('click', '#img'+id, function(){$('#'+id).trigger('click')});
                };
                reader.onerror = function(event) {
                    console.error("File could not be read! Code " + event.target.error.code);
                };
                reader.readAsDataURL(file);
            });

            function uploadFile(){

                var img_data = [];

                if(imgCount){
                    var quality = 0.3;
                    for(var i=1; i<=3; i++){
                        if(document.getElementById('img'+i)){
                            var source_img_obj = document.getElementById('img'+i);
                            var cvs = document.createElement('canvas');
                            cvs.width = source_img_obj.naturalWidth;
                            cvs.height = source_img_obj.naturalHeight;
                            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
                            var newImageData = cvs.toDataURL("image/jpeg", quality);
                            var img_name = $('#btn'+i).val();
                            img_data.push({index:i, name: img_name, image_data :newImageData});
                        }
                    }

                    var xhr = $.ajax({
                        url: 'a.php',
                        type: 'POST',
                        data: {post_data:img_data},
                        dataType: 'json'
                    });

                    xhr.success(function(response){
                        console.log(response);
                    });
                }
            }
        </script>
    </body>
</html>

PHP

<?php
$arr = $_POST;
if(isset($arr) && isset($arr['post_data'])){
    $arrImageData = $arr['post_data'];
    if(is_array($arrImageData)){
        for($i=0; $i<count($arrImageData); $i++){
            if($arrImageData[$i]['image_data'] != ''){
                $varImageData = preg_replace('/^data:image\/(png|jpg|jpeg);base64,/', '', $arrImageData[$i]['image_data']);
                $varImageData = base64_decode($varImageData);
                $varImageIndex = $arrImageData[$i]['index'];
                $varImageName = preg_replace('/[^a-zA-Z0-9]/', '-', $arrImageData[$i]['name']);
                $varFileName = $varImageName.'-'.$varImageIndex.'.jpg';             

                $file = fopen($varFileName, 'wb');
                fwrite($file, $varImageData);
                fclose($file);
            }
        }
    }
}

Answer 2

据我所知，客户端压缩（上传前）只能通过Java Applet完成。

服务器端压缩（上传后）可以通过PHP ZipArchive类完成。可以找到一个示例here。

编辑：除了Java Applets之外，客户端文件压缩也可以在Flash或Silverlight中实现，但是如果我理解正确，这将压缩每个文件的数据以便更快地发送而不创建文件存档。

在客户端上传许多文件并压缩它然后在服务器上上传压缩文件

2 个答案: