可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am using fileinput widget form 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.
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]
$( "#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]
@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
回答1:
If you are just looking for a file upload plugin, I recommend Ravishanker Kusuma's Hayageek jQuery File Upload plugin:
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:
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.
回答2:
The answer is that I have older version of control (4.1.6) and documentation I have red is newer (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)
回答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). 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).
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'); });
