I want to implement the concept site visitor can upload multiple files click on submit then compress files are upload on server xampp. I am using PHP scripting language.
Asked
Active
Viewed 3,087 times
1
-
1I am using php language ... can you show what have you tried to accomplish the goal so that we can tell whats wrong – NullPoiиteя Jan 17 '14 at 10:19
-
I'm 99.999% sure that Javascript alone won't be able to take the files supplied and modify them into a compressed file, that will probably be your PHP script. Are you looking for a way to have the PHP called from Javascript? What do you already have? – Nunners Jan 17 '14 at 10:24
-
I want to upload multiple file, for easily upload so want to compress first(all together) then upload on server to making fast uploading. – Deep Jan 17 '14 at 10:29
-
@Nunners I give you remaining 00.001% :) – Alireza Fallah Jan 17 '14 at 10:30
2 Answers
1
You can do this in HTML5 supported browser with the help of Canvas API [for images only]. Here is a good example
http://makeitsolutions.com/labs/jic/
HTML5 canvas refrences:
http://diveintohtml5.info/canvas.html
http://www.html5canvastutorials.com/
Below is dummy code:
HTML [Check jQuery path]
<!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);
}
}
}
}
kwelsan
- 1,229
- 1
- 7
- 18
-
This only works, when uploading images, since you need to add the image to canvas to get the compressed data URL. Does not work if the poster wants to upload binary files. – positivew Jan 17 '14 at 11:53
-
@positivew: Yes, You are right. Canvas will work with images only.. We can send binary data as well by using HTML5 File system API but that will not compressed.. – kwelsan Jan 17 '14 at 12:01
0
Client-side compression (before upload) can only be done via a Java Applet, as far as I know.
Server-side compression (after upload) can be done via PHP ZipArchive class. An example can be found here.
EDIT: In addition to Java Applets, client-side file compression can also be implemented in Flash or Silverlight, but if I understand correctly, this will compress data per file for quicker sending and not create a file archive.
