该脚本可以处理DOM中已有的任何输入,但是我需要从另一个文件(带有AJAX)中提取一个表单,该文件包含一个输入类型文件,并且当我使用该输入上传文件时,它会失败。
这就是我触发AJAX的方式:
<a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idsolicitud'].'"><i class="fas fa-lg fa-retweet"></i></a>
这是它背后的jquery:
$('.remitir').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
remiteSolicitud(id);
});
这是remiteSolicitud函数中的AJAX:
$.ajax({
type: 'POST',
url: 'anotherFile/',
data: { id: x },
cache: false,
beforeSend: function () {
$(".page-loader-wrapper").fadeIn();
},
success: function (e) {
$('#myModal').modal('show');
$('.modal-body').html(e);
},
complete: function () {
$(".page-loader-wrapper").fadeOut();
}
});
这是anotherFile表单输入类型File部分:
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group">
<div class="form-line focused">
<input class="form-control" type="text" name="nombreFiles" id="nombreFiles" data-file="file" readonly="" value="Comprobante_Donkijote_01_09_2018_20_09_12.jpg ">
<label class="form-label">Nombre del archivo (auto-generable) <a href="javascript:void(0);" style="color: black;" class="ver" title="Ver Comprobante Depósito" data-id="5 " data-img=""><i class="far fa-lg fa-eye"></i></a></label>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<input type="file" name="fileComprobantes" id="fileComprobantes"><br>
</div>
</div>
<div class="meter" id="" value="0" max="100">
<p></p>
<span style="width: 0%;"></span>
</div>
<h5 id="statusFiless"></h5>
</div>
<div class="form-group">
<div class="row">
<div class="col-auto unloaded">
<input id="SubirFichero" type="button" class="btn btn-outline-dark" value="Subir Fichero" data-upload="nombreFiles,nombreFile1s,../img/comprobantes/,fileComprobantes,statusFiless,progresBarFiles,1500000,jpg, png, jpeg, pdf,0,0">
</div>
</div>
</div>
</div>
</div>
此后,我检测是否单击了此上传按钮:
$('body').on('click', '#SubirFichero', function () {
var x = $(this).data('upload');
var p = x.split(',');
uploadFile(p[0], p[1], p[2], p[3], p[4], p[5], p[6], p[7], p[8], p[9]);
});
最后我将参数发送到上载函数,这是上载函数:
var bar, status;
function uploadFile(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10) {
console.log(a1, a2, a3, a4, a5, a6); //the parameters are ok
var file = _(a4).files[0];
console.log(file); //it prints undefined
bar = a6;
status = a5;
var formdata = new FormData();
formdata.append("file1", file);
formdata.append("a3", a3);
formdata.append("a7", a7);
formdata.append("a8", a8);
formdata.append("a9", a9);
formdata.append("a10", a10);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.myParam = a5;
ajax.myParam2 = a6;
ajax.myParam3 = a1;
ajax.myParam4 = a2;
ajax.myParam5 = a3;
ajax.open("POST", "js/uploadFile/", true);
ajax.send(formdata);
}
function progressHandler(event) {
var carga = 0;
carga = ((event.loaded / event.total) * 100 | 0);
$("#" + bar + " span").animate({ width: carga + '%' }, { duration: 600, easing: "linear" });
$("#" + bar + " p").text(carga + "%");
_(status).innerHTML = "Subiendo... Por favor espera";
}
function completeHandler(event) {
nombrestatus = event.target.myParam;
nombrebarra = event.target.myParam2;
nombrecampoimagen = event.target.myParam3;
nombrecampoimagenPic = event.target.myParam4;
nombrecarpeta = event.target.myParam5;
if (event.target.responseText.substring(0, 5) == "ERROR") {
_(nombrestatus).innerHTML = event.target.responseText;
_(nombrebarra).value = 0;
}
else {
_(nombrestatus).innerHTML = "Carga completada";
_(nombrebarra).value = 100;
document.getElementById(nombrecampoimagen).value = event.target.responseText;
$('#' + nombrecampoimagen).parent('div').addClass('focused');
}
}
当我尝试获取未定义的文件时。
可能是什么问题?