我正在使用 Fine-uploader 获取多个(大)文件并将文件名与附加的用户输入参数一起传递。我通过在每个文件旁边创建一个文本输入框(称为“allele_freq”)来做到这一点,并将文件名和 allele_freq 参数传递给我的 cgi 脚本。
接下来会发生什么(或接下来会发生什么)是我使用 allele_freq 参数分析文件中的数据,然后将一些图像返回到页面供用户查看。
如果用户想用新的 allele_freq 重新分析数据,我要做的就是将文件名与新的 allele_freq 一起传递,即我不想再次上传文件。我在下面粘贴了我的工作代码(它上传了多个文件以及每个文件的用户输入),然后是我无法工作的代码(它产生了一个“重新提交”按钮,但似乎没有做任何事情),以及代码中的一些注释/思考。
任何有关我将如何做到这一点的信息将不胜感激。我对 Fine-uploader 和 Javascript 都很陌生(你可能会说),所以请随时批评(当然是建设性的!)我的任何代码。
非常感谢,
格雷厄姆
<link href="fineuploader/fineuploader-3.6.4.css" rel="stylesheet">
<script src="fineuploader/jquery-2.0.1.js"></script>
<script src="fineuploader/jquery.fineuploader-3.6.4.js"></script>
<div id="multiFineUploader"></div>
<div id="triggeredUpload" class="btn btn-primary" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Upload now
</div>
<script>
$('#multiFineUploader').fineUploader({
request: {
endpoint: 'src/lib/upload.cgi'
},
autoUpload: false,
text: {
uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
}
})
.on('submitted', function(event, id, name) {
var fileItemContainer = $(this).fineUploader('getItemByFileId', id);
$(fileItemContainer)
.append('<input type="text" name="allele_freq">');
})
.on('upload', function(event, id, name) {
var fileItemContainer = $(this).fineUploader('getItemByFileId', id),
enteredAlleleFreq = $(fileItemContainer).find('INPUT[name="allele_freq"]').val();
$(this).fineUploader('setParams', {allele_freq: enteredAlleleFreq}, id);
});
$('#triggeredUpload').click(function() {
$('#multiFineUploader').fineUploader('uploadStoredFiles');
});
</script>
上面的代码工作正常
下面的代码没有
<div id="resubmitFreqs"></div>
<div id="retry" class="btn btn-success" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Resubmit
</div>
<script>
$('#resubmitFreqs').fineUploader({
request: {
//use a different script as shouldn't need to handle all the upload stuff
endpoint: 'src/lib/resubmit.cgi'
}
)}
//get the information from the allele_freq box. Should it still be in scope?? If not, how do I get at it?
.on('upload', function(event, id, name) {
var fileItemContainer = $(this).fineUploader('getItemByFileId', id),
enteredAlleleFreq = $(fileItemContainer).find('INPUT[name="allele_freq"]').val();
$(this).fineUploader('setParams', {allele_freq: enteredAlleleFreq}, id);
});
$('#retry').click(function() {
//I presumably don't want to use 'uploadStoredFiles', but I'm not sure how to post my new parameters into the resubmit.cgi server-side script
$('#resubmitFreqs').fineUploader('uploadStoredFiles');
});
</script>