Krajee文件输入小部件的“上载”方法引发异常

Question

I am using fileinput widget form krajee: http://plugins.krajee.com/file-input 我正在使用文件输入小部件形式krajee： http ://plugins.krajee.com/file-input

What I am doing wrong using 'upload' method ? 我使用“上传”方法做错了什么？ When I upload files by pressing upload button everything works great. 当我按“上传”按钮上传文件时，一切正常。 But when try to use upload method like this: 但是，当尝试使用这样的上传方法时：

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

I get an error: 我收到一个错误：

Uncaught TypeError: Cannot read property 'undefined' of undefined

in line 989. 在989行中。

I checked this is this line: 我检查了这一行：

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

and files are undefined there. 文件在那里没有定义 。

So what am I doing wrong? 那我在做什么错？ My code: 我的代码：

[js] [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 view] [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>
}

thanks in advance 提前致谢

Answer 1

If you are just looking for a file upload plugin, I recommend Ravishanker Kusuma's Hayageek jQuery File Upload plugin : 如果您只是在寻找文件上传插件，建议您使用Ravishanker Kusuma的Hayageek jQuery File Upload plugin ：

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

He breaks down the process into three simple steps, that basically look like this: 他将过程分为三个简单的步骤，基本上看起来像这样：

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

The final step is to have the PHP file specified in the jQuery code (in this case my_php_processor.php ) to receive and process the file: 最后一步是让jQuery代码中指定的PHP文件（在本例中为my_php_processor.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);

Note the relationship between myfile in the PHP ( $_FILES["myfile"] ), and the filename specified in the jQuery code block. 注意PHP中的myfile （ $_FILES["myfile"] ）和jQuery代码块中指定的文件名之间的关系。

Answer 2

The answer is that I have older version of control (4.1.6) and documentation I have red is newer (4.1.7). 答案是我拥有较旧版本的控件（4.1.6），而我拥有红色文档则较新（4.1.7）。 In 4.1.6 upload method must have parameters, in 4.1.7 not In 4.1.6 the solution might be use uploadBatch which has no parameters (what I finally did) 在4.1.6中， upload方法必须具有参数，在4.1.7中，没有参数。在4.1.6中，解决方案可能是使用没有参数的uploadBatch （我最终做了什么）

Answer 3

I was having the same issue, but I couldn't find a good solution, so I came up with a workaround. 我遇到了同样的问题，但是找不到很好的解决方案，所以我想出了一种解决方法。

I'm using the 'filebatchuploadcomplete' event, so I know when all the files in the batch are uploaded succesfully (even if there's only one file in the batch to be uploaded). 我正在使用'filebatchuploadcomplete'事件，所以我知道何时成功上传了该批次中的所有文件（即使该批次中只有一个文件要上传）。 When this event is triggered, I call 3 methods of the fileinput inside the closure function to clear, reset and re-enable the fileinput area (dropzone too, if you're using one). 触发此事件后，我在闭包函数中调用了fileinput的3种方法，以清除，重置和重新启用fileinput区域（如果使用的话，也为dropzone）。

THIS METHOD WORKS REGARDLESS IF THE ABOVE MENTIONED ERROR IS THROWN OR NOT BY THE PLUGIN. 如果上面提到的错误是由插件引发或没有引发的，则此方法有效。

Here's my sample: 这是我的示例：

$('#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');

});

Krajee文件输入小部件的“上载”方法引发异常

问题描述

3 个解决方案

解决方案1
1 2015-02-19 14:45:42

解决方案2
1 已采纳 2015-03-09 16:52:08

解决方案3
0 2017-01-23 18:16:09

Krajee文件输入小部件的“上载”方法引发异常

问题描述

3 个解决方案

解决方案1 1 2015-02-19 14:45:42

解决方案2 1 已采纳 2015-03-09 16:52:08

解决方案3 0 2017-01-23 18:16:09

解决方案1
1 2015-02-19 14:45:42

解决方案2
1 已采纳 2015-03-09 16:52:08

解决方案3
0 2017-01-23 18:16:09