上传失败,动态添加了inpunt

时间:2018-10-26 16:16:02

标签: jquery ajax

该脚本可以处理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');

  }

 }

当我尝试获取未定义的文件时。

可能是什么问题?

0 个答案:

没有答案