我已经在stackoverflow上看到了关于问题的其他讨论，但由于它经常发生，它没有可行的解决方案 - 它就像“尝试这样做，看看发生了什么” 所以，我需要至少两个完全独立的文件上传小部件 - 没有图片预览，每个小部件的单个文件上传，没有查询。希望节省几天工作时间的其他人的工作代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style type="text/css">
.bar {
height: 18px;
color: #fff;
text-align: right;
height: 25px;
width: 0;
background-color: #0ba1b5;
border-radius: 3px;
}
.container{
width: 25em;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display:inline-block;
margin:0px 10px 5px 5px;
vertical-align:top;
}
input[type=file]{
width:6.8em;
color:transparent;
}
</style>
<script type="text/javascript" src="/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/lib/jquery.validate.min.js "></script>
<script type="text/javascript" src="/lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/lib/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/lib/jquery.fileupload.js"></script>
<script type="text/javascript">
window.pressed = function(){
var a = document.getElementById('fileupload');
if(a.value == "") { fileLabel.innerHTML = "Choose file"; }
else { var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
window.pressed2 = function(){
var a2 = document.getElementById('fileupload2');
if(a2.value == "") { fileLabel2.innerHTML = "Choose file"; }
else { var theSplit2 = a2.value.split('\\');
fileLabel2.innerHTML = theSplit2[theSplit2.length-1];
}
};
function HumanFileSize(fileSizeInBytes) {
var i = -1;
var byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
do { fileSizeInBytes = fileSizeInBytes / 1024;
i++;
} while (fileSizeInBytes > 1024);
return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
};
$(function () {
'use strict';
// Define the url to send the image data to
var url = '/cgi-bin/files.php';
var url2 = '/cgi-bin/files2.php';
// Call the fileupload widget and set some parameters
$('#fileupload').fileupload({
url: url,
dataType: 'json',
submit: function (e, data) {
// Add each uploaded file name to the #files list
$('#files').hide();
$("#files").html("");
$('#progress').show();
},
done: function (e, data) {
$('#progress').hide();
$.each(data.result.files, function (index, file) {
$('<label>Uploaded: ' + HumanFileSize(file.size) + '</label>').appendTo('#files');
});
$('#files').show();
},
fail: function (e, data) {
$('#progress').hide();
$('#files').show();
$.each(data.messages, function (index, error) {
$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>').appendTo('#files');
});
},
progressall: function (e, data) {
// Update the progress bar while files are being uploaded
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
$('#fileupload2').fileupload({
url: url2,
dataType: 'json',
add: function (e, data) {
data.submit();
},
submit: function (e, data) {
// Add each uploaded file name to the #files3 list
$('#files3').hide();
$("#files3").html("");
$('#progress2').show();
},
done: function (e, data) {
$('#progress2').hide();
$.each(data.result.files2, function (index, file) {
$('<label>Uploaded: ' + HumanFileSize(file.size) + '</label>').appendTo('#files3');
});
$('#files3').show();
},
progressall: function (e, data) {
// Update the progress bar while files are being uploaded
var progress2 = parseInt(data.loaded / data.total * 100, 10);
$('#progress2 .bar').css(
'width',
progress2 + '%'
);
}
});
});
</script>
</head>
<body>
<table>
<thead>
<th style="min-width:28em;auto !important;_width:28em">Dataset1</th>
<th style="min-width:28em;auto !important;_width:28em">Dataset2</th></thead>
<tbody>
<tr>
<td>
<input id="fileupload" type="file" name="files[]" onchange="pressed()"><label id="fileLabel">Choose file</label>
</td>
<td>
<input id="fileupload2" type="file" name="files2[]" onchange="pressed2()"><label id="fileLabel2">Choose file</label>
</td>
</tr>
<tr>
<td>
<div id="files" style="display:none;"></div>
<div id="progress" class="container" style="display:none;">
<div class="bar" style="width: 0%;"></div></div>
</td>
<td>
<div id="files3" class="files" style="display:none;"></div>
<div id="progress2" class="container" style="display:none;">
<div class="bar" style="width: 0%;"></div></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
files.php：
<?php
error_reporting(E_ALL | E_STRICT);
require('blueImpUploader.php');
$options = array ('upload_dir' => '/tmp/files/',
'image_versions' => array());
$upload_handler = new UploadHandler($options);
?>
files2.php：
<?php
error_reporting(E_ALL | E_STRICT);
require('blueImpUploader.php');
$options = array ('upload_dir' => '/tmp/files/',
'image_versions' => array(),
'param_name' => 'files2');
$upload_handler = new UploadHandler($options);
?>
问题是如何在上传之前添加文件验证？我只想接受几个文件扩展名，但“正常”和gzip都是 - 我的意思是.bed和.bed.gz，.sgr和.sgr.gz。我不能通过处理add：function（e，data）或在files.php中输入适当的扩展来做到这一点。或者，我会说，它正在部分工作 - 一些扩展被过滤，一些不是。