Javascript 在客户端上传多个文件并进行压缩，然后在服务器上上传压缩文件
我想实现的概念网站访问者可以上传多个文件点击提交然后压缩文件上传到服务器xampp。我使用的是PHP脚本语言。据我所知，客户端压缩（上传前）只能通过Java小程序完成 服务器端压缩（上传后）可以通过PHP ZipArchive类完成。可以找到一个例子Javascript 在客户端上传多个文件并进行压缩，然后在服务器上上传压缩文件,javascript,php,jquery,Javascript,Php,Jquery,我想实现的概念网站访问者可以上传多个文件点击提交然后压缩文件上传到服务器xampp。我使用的是PHP脚本语言。据我所知，客户端压缩（上传前）只能通过Java小程序完成 服务器端压缩（上传后）可以通过PHP ZipArchive类完成。可以找到一个例子 编辑：除了Java小程序外，客户端文件压缩也可以在Flash或Silverlight中实现，但如果我理解正确，这将压缩每个文件的数据，以便更快地发送，而不是创建文件存档。您可以在支持HTML5的浏览器中借助Canvas API（仅适用于图像）完成此
编辑：除了Java小程序外，客户端文件压缩也可以在Flash或Silverlight中实现，但如果我理解正确，这将压缩每个文件的数据，以便更快地发送，而不是创建文件存档。您可以在支持HTML5的浏览器中借助Canvas API（仅适用于图像）完成此操作。这是一个很好的例子 HTML5画布参考： 以下是虚拟代码： 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>
.img_按钮{高度：100%；宽度：100%}
.img_提交{边框：1px鞍形实心；高度：30px；边距顶部：100px}
.box{float:左；边距：10px；宽度：20%；高度：250px}
.label{float:左；背景：#333；颜色：#fff；宽度：100%；左填充：10px}
img{float:left；}
var imgCount=1；
$（'.filename'）.change（函数（）{
var file=this.files[0]；
var id=this.id；
var reader=new FileReader（）；
reader.onload=函数（事件）{
var i=document.createElement（'img'）；
i、 src=event.target.result；
i、 id='img'+id；
i、 onload=函数（）{
图像宽度=$（i）.width（），
图像高度=$（i）.height（）；
如果（图像宽度>图像高度）{
i、 style.width=“320px”；
}否则{
i、 style.height=“300px”；
}
//i、 style.display=“block”；
}
$（'#img'+id）.remove（）；
$（“#框”+id）；
$（'#box'+id）.prepend（'+$（'#btn'+id）.val（）+''）；
$（'#btn'+id）.hide（）；
$（document）.on（'click'，'#img'+id，function（）{$（'#'+id）.trigger（'click'）}）；
};
reader.onerror=函数（事件）{
console.error（“无法读取文件！代码”+event.target.error.Code）；
};
reader.readAsDataURL（文件）；
});
函数uploadFile（）{
var img_数据=[]；
如果（imgCount）{
var质量=0.3；
对于（var i=1；我正在使用php语言……你能告诉我们你试图实现这个目标的原因吗？这样我们就可以知道错在哪里了。我99.999%确信单凭Javascript无法将提供的文件转换成压缩文件，并将其修改成压缩文件，这可能就是你的php脚本。你在寻找一种从Javascript调用php的方法吗？您已经有了什么？我想上传多个文件，以便轻松上传，所以希望先压缩（所有文件一起），然后上传到服务器上，以便快速上传。@Nunners我给您剩余的00.001%：）我认为我们可以使用HTML5 canvas API进行客户端压缩。@kwelsan canvas只能用于图像。这不是真的……这可以用JavaScriptPlease轻松完成。请提供一个例子。这只在上载图像时有效，因为您需要将图像添加到canvas以获取压缩数据URL。如果海报nts上传二进制文件。@positivew：是的，你说得对。画布只能处理图像。我们也可以使用HTML5文件系统API发送二进制数据，但不会压缩。。
<?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);
}
}
}
}