【问题标题】:Why is Ajax not working when I upload PDF files?为什么我上传 PDF 文件时 Ajax 不起作用?
【发布时间】:2014-01-15 14:20:27
【问题描述】:

我一直在使用 Ajax 发送和上传文件,一切正常,我可以毫无问题地上传照片和文件,但现在它不适用于 .pdf 文件。

这就是我从我的 jQuery 文件中得到的原因:

function uploadImage(){
    $('#file').change(function(){  
        var file = this.files[0]
        if(file){
            $('.alert.alert-danger').hide();
            $('#filename').text(file.name);
            $('#filename').show();
            $('.cargando').show();
            $('.uploaded').hide();

            $('#file').hide();
            name = file.name;
            size = file.size;
            type = file.type;
            uploadAjax();
        }

    });
    $('#uploadremove').click(function(e){
        e.preventDefault();
        $('.alert.alert-danger').hide();
        $('#file').show();
        $('.cargando').hide();
        $('#filename').hide();
        $('#uploadok').hide();
        $('#uploadremove').hide();
        $('#file_id').val("0");
        $('.fileinput-button').show();
        $('.savebtn').toggleClass('disabled');
        $('.uploaded').hide();
    });
}

function uploadAjax(){ 
    var inputFileImage = document.getElementById("file"); 
    var filelocation = $('#file').val(); 
    var file = inputFileImage.files[0]; 
    var info = new FormData(); 
    var tipo_archivo = $("#file").attr('accept');
    var tipo_archivo = type;
    info.append('tipo', tipo_archivo); console.log(file);
    var url = HTTP+"admin/uploadfile";
    $.ajax({
        url:url,
        type:'POST',
        contentType:false,
        data: info,//{archivo : file, tipo : tipo_archivo},
        processData:false,
        cache:false,
        success:function(response){
            if(response != '' && !($.isNumeric(response)) ){
                $('.alert.alert-danger #uploaderror').html(response);
                $('.alert.alert-danger').fadeIn(2000);
                $('.cargando').hide();
                $('#filename').hide();
                $('#file').show();
            }
            else{
                $('.cargando').hide();
                $('#uploadok').show();
                $('#uploadremove').show();
                $('#file_id').val(response);
                $('.fileinput-button').hide();
                $('.savebtn').toggleClass('disabled');
                if(tipo_archivo == "image/*"){
                    console.log(file);
                }
            }
        }
    });
}

这是 HTML 表单:

<form class="form-horizontal validate" role="form" method="post" action="<?=fk_link().'admin/savecv'?>">
    <input name="location" type="hidden" class="location" value="admin/addcv/<?=@$profesor['id']?>" >
    <input name="profesor_id" type="hidden" value="<?=@$profesor['id']?>" >
    <div class="form_message">
        <div class="alert alert-warning">
        </div>
    </div>
    <? 
    $texto = "Seleccionar Archivo PDF";
    if(@$profesor['profesor_cv']){ $texto = "Cambiar Cv";?>
    <div class="uploaded">
        <a class="btn btn-success fileDownloadPromise" target="_blank" href="<?=fk_link().'uploads/'.@$cv['cv']?>">
            <i class="glyphicon glyphicon-cloud-download"></i>
            <span>Descargar</span>
        </a>
    </div>
    <? 
    } else $texto = "Seleccionar Archivo PDF";?>
    <span class="btn btn-danger fileinput-button">
        <i class="glyphicon glyphicon-cloud-upload"></i>
        <span><?=$texto?></span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="file"  type="file" name="fileToUpload" id="filesToUpload">
    </span>
    <span class="cargando"><img src="<?=fk_theme_url().'/images/loading.gif'?>"></span>
    <span id="filename"></span>
    <input id="file_id" name="file_id" type="hidden" value="0" >
    <span id="uploadok" class="glyphicon glyphicon-ok"></span>
    <a href="#" id="uploadremove">Cambiar</a>

    <div class="clearfix" style="height:10px"></div>
    <div class="alert alert-danger col-md-3" style="display:none;">
        <span class="glyphicon glyphicon-warning-sign"></span>
        <span id="uploaderror">error example</span>
    </div>
    <input class="btn btn-primary savebtn disabled" value="Guardar" type="submit">
</form>

正如我所说,一切正常,但现在它只适用于图像。

【问题讨论】:

  • 可能是服务器脚本正在检查文件类型,只允许图片。
  • ajax发送的数据到达服务器时为空-phpfile
  • 如果它工作正常,有什么变化?您在浏览器控制台中检查请求本身会看到什么?只是说it doesn't work 没什么好说的。还有文件有多大?它们是否超出服务器上传限制?
  • @charlietfl 我不敢相信这是这么愚蠢的事情:-/文件太大了。谢谢!
  • 可以看到它与这个上传插件一起使用。包含 php 文件以显示其工作原理plupload.com

标签: php jquery ajax pdf file-upload


【解决方案1】:
info.append('tipo', tipo_archivo);

上面应该有:

info.append('tipo', file);

【讨论】:

    猜你喜欢
    • 2012-10-23
    • 2016-02-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-14
    • 2017-12-17
    相关资源
    最近更新 更多