Я хочу внедрить концепцию. Посетитель сайта может загружать несколько файлов, а затем отправлять файлы на сервер xampp. Я использую PHP скриптовый язык.
Вы можете сделать это в браузере с поддержкой HTML5 с помощью Canvas API [только для изображений]. Вот хороший пример
http://makeitsolutions.com/labs/jic/
HTML5 рельефы холста:
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); } } } }
Насколько мне известно, сжатие на стороне клиента (перед загрузкой) может выполняться только с помощью Java-апплета.
Сжатие на стороне сервера (после загрузки) может быть выполнено через класс PHP ZipArchive. Пример можно найти здесь .
EDIT: в дополнение к Java-апплетам сжатие на стороне клиента также может быть реализовано во Flash или Silverlight, но если я правильно понимаю, это сжимает данные на файл для более быстрой отправки и не создает файл-архив.