Question

我在上传xml时遇到错误并上传csv是一个菜鸟，所以请你能给我一个精心解答的答案我已经尝试在单击上传按钮上调试代码，直到上传功能正常工作，跳转到uploadxml（）函数，数据不会被发送。我的HTML代码

<div class="file-upload">
                    <form id="file-upload-form">
                        <div class="upload">
                            <div class="col-lg-6">
                                <div class="input-group" id="one">

                                    <input type="text" class="form-control" id="t1" placeholder="Select an xml file.." >
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="xmlbtn">Browse</button>
                                    </span>

                                </div>
                                <input type="file" accept=".xml" class="hidden" id="xmlPicker" name="xmlFile"/>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-group" id="two">

                                    <input type="text" class="form-control" id="t2" placeholder="Select an csv file.." >
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="csvbtn">Browse</button>
                                    </span>

                                </div>
                                <input type="file" class="hidden" accept=".csv" id="csvPicker" name="csvFile"/>
                            </div>
                        </div>
                        <div class="uploadfooter">
                            <button class="btn btn-default center" type="button" id="upload">Upload</button>
                        </div>
                    </form>
                </div>

我的Js

$(document).ready(function () {

    $(".ts-sidebar-menu li a").each(function () {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    var menux = $('.ts-sidebar-menu li a.parent');
    $('<div class="more"><i class="fa fa-angle-down"></i></div>').insertBefore(menux);
    $('.more').click(function () {
        $(this).parent('li').toggleClass('open');
    });
    $('.parent').click(function (e) {
        e.preventDefault();
        $(this).parent('li').toggleClass('open');
    });
    $('.menu-btn').click(function () {
        $('nav.ts-sidebar').toggleClass('menu-open');
    });


     $('#zctb').DataTable();


     $("#input-43").fileinput({
        showPreview: false,
        allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
        elErrorContainer: "#errorBlock43"
            // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
    });


     $("#xmlbtn").bind("click", function(){

         $("#xmlPicker").trigger("click");

     });


     $("#xmlPicker").bind("change", function(e){

         $("#t1").val($("#xmlPicker")[0].files[0].name);

     })


     $("#csvbtn").bind("click", function () {
         $("#csvPicker").trigger("click");
     });

     $("#csvPicker").bind("change", function (e) {
         $("#t2").val($("#csvPicker")[0].files[0].name)
     })





     $("#upload").on("click",function () {

         var firstfile = $("#t1").val();
         var secondfile = $("#t2").val();

         if(!firstfile || firstfile != null){
             updateXml();
         }

         if(!secondfile || secondfile != null){
             updatecsv();
         }

     })

     function updateXml(){

         var form = $("#file-upload-form").val()
         var data = new FormData(form);

         $.ajax({
             url: "/update",
             data: data,
             type: "put",
             contentType: false,
             processData: false,
             cache: false,
             success: function (response) {
                 console.log(response);

             }
         })
     }



     function updatecsv(){
         var form = $("#file-upload-form").val()
         var data = new FormData(form);
         $.ajax({
             url: "/update",
             data: data,
             type: "put",
             contentType: false,
             processData: false,
             cache: false,
             success: function (response) {
                 console.log(response);
             }
         })
     }

 });

Answer 1

这一行：

var form = $("#file-upload-form").val()

表单没有值，其输入有一个。 FormData需要一个表单，因此您需要为它提供一个引用。

var form = $("#file-upload-form");
var data = new FormData(form[0]);  //expects a DOM form

我尝试使用node和ajax上传文件，但是ajax调用是不是正常工作？

1 个答案: