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

Krajee file-input widget 'upload' method throws exception

本文关键字：方法 异常 上传 文件 输入 Krajee 小部      更新时间：2024-02-01

我使用的是文件输入小部件表单krajee：http://plugins.krajee.com/file-input

使用"上传"方法我做错了什么？当我按下上传按钮上传文件时，一切都很好。但是当尝试使用这样的上传方法时：

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

我得到一个错误：

Uncaught TypeError: Cannot read property 'undefined' of undefined

在第989行。

我查过这是这行：

formdata.append(self.uploadFileAttr, files[i]);

并且文件在那里是未定义的。

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

[js]

$( "#projectFiles" ).fileinput( {
browseClass: 'btn btn-default',
showPreview: true,
showUpload: true,
multiple: "multiple",
uploadAsync: true,
uploadUrl: "/home/UploadFiles"
} );
function submitForm( e ) {
$( '#projectFiles' ).fileinput( 'upload' );
// atach to event 'filebatchuploadsuccess' then submit rest of form
}

[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>
}

提前感谢

如果你只是在寻找一个文件上传插件，我推荐Ravishanker Kusuma的Hayageek jQuery File Upload plugin:

http://hayageek.com/docs/jquery-upload-file.php

他将这个过程分解为三个简单的步骤，基本上看起来是这样的：

<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>

最后一步是在jQuery代码中指定PHP文件（在本例中为my_php_processor.php）来接收和处理文件：

my_php_processor.php：

<?php
    $output_dir = "uploads/";
    $theFile = $_FILES["myfile"]["name"];
    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);

注意PHP中的myfile（$_FILES["myfile"]）和jQuery代码块中指定的文件名之间的关系

答案是我有旧版本的控件（4.1.6），我有红色的文档（4.1.7）。4.1.6upload方法必须有参数，4.1.7中没有在4.1.6中，解决方案可能是使用没有参数的上传批次（我最终做了什么）

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

我正在使用"filebatchuploadcomplete"事件，这样我就知道批处理中的所有文件何时成功上传（即使批处理中只有一个文件要上传）。当这个事件被触发时，我在闭包函数中调用fileinput的3个方法来清除、重置和重新启用fileinput区域（如果你使用的是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');
});
相关文章：