Fatal编程技术网
  • javascript/
  • Javascript Krajee文件输入小部件'；上传'；方法引发异常

Javascript Krajee文件输入小部件'；上传'；方法引发异常

javascript jquery asp.net-mvc

Javascript Krajee文件输入小部件'；上传'；方法引发异常,javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,我正在使用fileinput小部件表单krajee： 使用“上传”方法时我做错了什么？ 当我按上传按钮上传文件时，一切都很好。但当尝试使用这种上传方法时： $( '#projectFiles' ).fileinput( 'upload' ); <head> <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet"> // (1)

我正在使用fileinput小部件表单krajee：

使用“上传”方法时我做错了什么？ 当我按上传按钮上传文件时，一切都很好。但当尝试使用这种上传方法时：

$( '#projectFiles' ).fileinput( 'upload' );

<head>
    <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">  // (1)
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>   // (1)
</head>
<body>
    <div id="fileuploader">Upload</div>  // (2)
    <script>
        $(document).ready(function(){
            $("#fileuploader").uploadFile({  // (3)
                url:"my_php_processor.php",
                fileName:"myfile"
            });
        });
    </script>
</body>
我得到一个错误：

Uncaught TypeError: Cannot read property 'undefined' of undefined
第989行

我检查了这是这行：

formdata.append(self.uploadFileAttr, files[i]);
并且文件在那里没有定义

那么我做错了什么？ 我的代码：

[js]

[ASP MVC视图]

@using( Html.BeginForm( "RequestPost", "Home", FormMethod.Post, new { id = "frmRequest", @class = "", enctype = "multipart/form-data" } ) )
{
<div id="projectFilesDiv" class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<input id="projectFiles" name="projectFiles" type="file"/>
</div>
</div>
</div>

@* THE REST OF THE FORM *@


<button type="button" onclick="submitForm()">SUBMIT</button>
}

@使用（Html.BeginForm（“RequestPost”、“Home”、FormMethod.Post、new{id=“frmRequest”、@class=”、enctype=“multipart/form data”}））
{
@*表格的其余部分*@
提交
}
提前感谢

如果您正在寻找文件上传插件，我推荐Ravishanker Kusuma的
Hayageek jQuery文件上传插件
：

他将过程分解为三个简单步骤，基本上如下所示：

$( '#projectFiles' ).fileinput( 'upload' );

<head>
    <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">  // (1)
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>   // (1)
</head>
<body>
    <div id="fileuploader">Upload</div>  // (2)
    <script>
        $(document).ready(function(){
            $("#fileuploader").uploadFile({  // (3)
                url:"my_php_processor.php",
                fileName:"myfile"
            });
        });
    </script>
</body>
请注意PHP中的
myfile
（
$\u FILES[“myfile”]
）与jQuery代码块中指定的文件名之间的关系。

答案是，我有较旧版本的控件（4.1.6），我有较新版本的红色文档（4.1.7）。 在4.1.6中，上传方法必须具有参数，在4.1.7中不具有参数
在4.1.6中，解决方案可能是使用uploadBatch，它没有参数（我最后做了什么）

我遇到了同样的问题，但我找不到好的解决方案，所以我想出了一个解决办法

我正在使用“filebatchuploadcomplete”事件，因此我知道批处理中的所有文件何时成功上载（即使批处理中只有一个文件需要上载）。 当触发此事件时，我在closure函数中调用fileinput的3个方法来清除、重置和重新启用fileinput区域（如果使用dropzone，也可以使用dropzone）

无论插件是否抛出上述错误，此方法都有效

这是我的样本：

$('#myFileuploadArea').fileinput({

    //set the upload options here
    ...
    ...
    ...

}).on("filebatchselected", function(event) {

    // trigger upload method immediately after files are selected
    $('#myFileuploadArea').fileinput("upload");

}).on('filebatchuploadcomplete', function(event) {

    // this part is triggered when all files are succefully 
    // uploaded from the batch, even if there was only one file selected
    console.log('ALL FILES IN BATCH UPLOADED SUCCESSFULLY');
    $('#myFileuploadArea').fileinput('refresh');
    $('#myFileuploadArea').fileinput('reset');
    $('#myFileuploadArea').fileinput('enable');

});