Question

我正在使用fileinput widget form krajee： http://plugins.krajee.com/file-input

使用＆＃39;上传＆＃39;我做错了什么方法？当我通过按上传按钮上传文件时，一切都很好。但是当尝试使用像这样的上传方法时：

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

提前致谢

Answer 1

如果你只是在寻找文件上传插件，我推荐Ravishanker Kusuma＆＃39; 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代码块中指定的文件名之间的关系。

Answer 2

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

Answer 3

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

我正在使用'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');

});

Krajee文件输入小部件'upload'方法抛出异常

3 个答案: