时间戳

首页 > 解决方案 > 如何在 $(document).ready(function(e){ 中获取文件输入变量

jquery - 如何在 $(document).ready(function(e){ 中获取文件输入变量

问题描述

我正在尝试使用 AJAX 上传 PDF 文档，并使用文件名和“app_id”引用更新数据库，但不知道如何从代码中获取额外的变量。

这是jquery代码：

我尝试了几种不同的方法将数据获取到查询 $(document).ready(function(e) 代码，但它一直返回为“未定义”。

$(document).ready(function(e){
$("#fupForm").change('submit', function(e){
    e.preventDefault();
    var creditapp_column = $('#creditapp_column').val();
    $.ajax({
        type: 'POST',
        url: 'upload1.php?column='+creditapp_column+'&app_id=123',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        beforeSend: function(){
            $('.submitBtn').attr("disabled","disabled");
            $('#fupForm').css("opacity",".5");
        },
        success: function(msg){
            $('.statusMsg').html('');
            if(msg == 'ok'){
                $('#fupForm')[0].reset();
                $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Form data submitted successfully.</span>');
            }else{
                $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
            }
            $('#fupForm').css("opacity","");
            $(".submitBtn").removeAttr("disabled");
        }
    });
});

//file type validation
$("#file").change(function() {
    var file = this.files[0];
    var imagefile = file.type;
    var match= ["image/jpeg","image/png","image/jpg"];
    if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
        alert('Please select a valid image file (JPEG/JPG/PNG).');
        $("#file").val('');
        return false;
    }
});

});

我希望将以下附加变量添加到文件上传中：name="creditapp_supplied" creditapp_id='.$results[$k]["app_id"].'

标签： jquery

解决方案

编辑：-我被要求提供一个解决方案，用于在选择文件时而不是在用户单击提交按钮时发布文件。这就是你要做的。

//Store this globally
const AcceptedFileTypes = ["image/jpeg","image/png","image/jpg"];
//file type validation
$("#file").change(function() {
    var file = this.files[0];
    if(!AcceptedFileTypes.includes(file.type)){
        alert('Please select a valid image file (JPEG/JPG/PNG).');
        $("#file").val('');
        //You don't really want to return false, that's obtrusive.
    }
    else {
        $.ajax({
            type: 'POST',
            url: 'upload1.php?column='+creditapp_column+'&app_id=123',
            data: new FormData(this),
            contentType: false,
            cache: false,
            beforeSend: function(){
                //You might also want to show a preloader of some kind.
                $('.submitBtn').attr("disabled","disabled");
                $('#fupForm').css("opacity",".5");
            },
        }).done(function(data){
            //Do something after the success response
        }).fail(function(error){
            //Do something id the request fails.
        });
    }
});

将提交事件处理程序添加到表单的行中有一个错误。从改变它。

$("#fupForm").change('submit',function(e){//Your code});

至

$("#fupForm").on('submit',function(e){//Your code});

.change('event name', [handler callback])是不正确的语法， .change 将表单的更改事件（不是应该绑定的位置）与提供的处理程序回调绑定。您正在寻找的是.submit([handler callback])或.on("submit", [handler callback])。

推荐阅读