通过ajax上传和保存文件

时间:2016-09-22 10:29:17

标签: php jquery ajax

我是这个网站以及ajax的新手,在发布之前,虽然我搜索过,坚果没有得到我的问题的正确答案。

我有表格,我可以上传而不是保存档案,所有这些都是通过ajax发生的。

    $('#'+loader).fadeIn('fast');

    var input = document.getElementById(fileid);
    file = input.files[0];

    var filename= $('#'+fileid).val();
    var exts = ["pdf", "doc", "docx", "PDF", "DOC", "DOCX"];
    if(file != undefined){
    formData= new FormData();

    if ( filename ) 
    {
        // split file name at dot
        var get_ext = filename.split('.');
        // reverse name to check extension
        get_ext = get_ext.reverse();
        // check file type is valid as given in 'exts' array
        if ( $.inArray ( get_ext[0].toLowerCase(), exts ) > -1 ){ var found = true; } else { var found = false; }
    }


    if(found) {
        formData.append("image", file);
        $.ajax({
        url: uri,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data){
            if(data.length!=0)
            {
                $('#'+loader).fadeOut('fast');$('#'+errorid).fadeOut('fast');$('#'+exerror).fadeOut('fast');$('#'+hide1).fadeOut('fast');
                $('#'+successid).fadeIn('fast');
                $('#'+inputhidden).val(data);
                $('#'+imgname).fadeIn('fast');
                $('#'+filesavebtn).fadeIn('fast');
                $('#'+imgname).html(data);
            }else if(data.length==0)
            {
                $('#'+loader).fadeOut('fast');$('#'+exerror).fadeOut('fast');$('#'+successid).fadeOut('fast');$('#'+hide1).fadeOut('fast');
                $('#'+errorid).fadeIn('fast');
            }       
        }
        });
    }
    else{
      $('#'+loader).fadeOut('fast');$('#'+errorid).fadeOut('fast');$('#'+successid).fadeOut('fast');$('#'+hide1).fadeOut('fast');
      $('#'+exerror).fadeIn('fast');
    } 

  }else{

  }

并通过

保存
var fileval= $('#'+fileid).val();
var fileuniqval= $('#'+fileuniqid).val();

$.ajax({
    url: pageurl,
    type: 'POST',
    data: 'fileupload='+fileval+'&identi='+fileuniqval+'&uniqids=fileuploading',
    success: function(data)
    {
        if(data=='FALSE'){ 
            alert("Server Error, please try again.");
        }if(data=='TRUE'){
            $('#'+hide1).fadeOut('fast');$('#'+hide2).fadeOut('fast');$('#'+hide3).fadeOut('fast');
            $('#'+inputid).val('');
            $('#'+successmsg).fadeIn('fast');
            $('#'+filearea).css({ 'border-color': '#008000', 'border-width':'2px', 'border-style':'solid' });
            $('#'+filearea).animate({ 'backgroundColor': '#008000', 'color': '#fff'}, 1000);
            $('#'+filearea).animate({ 'backgroundColor': '#fff', 'color': '#000'}, 3000);
        }
    }
});

现在我的问题是我想一次性上传和保存程序!虽然我尝试通过将一个功能嵌套在另一个功能中来合并这两个功能但是没有按照预期工作。

$('#'+loader).fadeIn('fast');

    var input = document.getElementById(fileid);
    file = input.files[0];

    var filename= $('#'+fileid).val();
    var exts = ["pdf", "doc", "docx", "PDF", "DOC", "DOCX"];

    var fileval= $('#'+inputhidden).val();
    var fileuniqval= $('#'+fileuniqid).val();

    if(file != undefined){
    formData= new FormData();

    if ( filename ) 
    {
        // split file name at dot
        var get_ext = filename.split('.');
        // reverse name to check extension
        get_ext = get_ext.reverse();
        // check file type is valid as given in 'exts' array
        if ( $.inArray ( get_ext[0].toLowerCase(), exts ) > -1 ){ var found = true; } else { var found = false; }
    }


    if(found) {
        formData.append("image", file);
        $.ajax({
        url: uri,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data){
            if(data.length!=0)
            {
                $('#'+loader).fadeOut('fast');$('#'+errorid).fadeOut('fast');$('#'+exerror).fadeOut('fast');$('#'+hide1).fadeOut('fast');
                $('#'+successid).fadeIn('fast');
                $('#'+inputhidden).val(data);
                $('#'+imgname).fadeIn('fast');
                //$('#'+filesavebtn).fadeIn('fast');
                $('#'+imgname).html(data);

                $.ajax({
                    url: pageurl,
                    type: 'POST',
                    data: 'fileupload='+fileval+'&identi='+fileuniqval+'&uniqids=fileuploading',
                    success: function(data)
                    {
                        if(data=='FALSE'){ 
                            alert("Server Error, please try again.");
                        }if(data=='TRUE'){
                            $('#'+successid).fadeOut('fast');$('#'+exerror).fadeOut('fast');$('#'+errorid).fadeOut('fast');
                            $('#'+fileid).val('');
                            $('#'+hide1).fadeIn('fast');
                            $('#'+filearea).css({ 'border-color': '#008000', 'border-width':'2px', 'border-style':'solid' });
                            $('#'+filearea).animate({ 'backgroundColor': '#008000', 'color': '#fff'}, 1000);
                            $('#'+filearea).animate({ 'backgroundColor': '#fff', 'color': '#000'}, 3000);
                        }
                    }
                });
            }else if(data.length==0)
            {
                $('#'+loader).fadeOut('fast');$('#'+exerror).fadeOut('fast');$('#'+successid).fadeOut('fast');$('#'+hide1).fadeOut('fast');
                $('#'+errorid).fadeIn('fast');
            }       
        }
        });
    }
    else{
      $('#'+loader).fadeOut('fast');$('#'+errorid).fadeOut('fast');$('#'+successid).fadeOut('fast');$('#'+hide1).fadeOut('fast');
      $('#'+exerror).fadeIn('fast');
    } 

  }else{

  }

0 个答案:

没有答案