About the use of bootstrap FileUpload upload plugin

Class

The plug-in must not be referenced until Bootstrap is invoked (note that the font style script is referenced after fileinput.min.js).

First, the reference code

<script src= ". /.. /scripts/fileinput/fa.js "type=" Text/javascript "></script>
<script src=". /.. /scripts/fileinput/purify.min.js "type=" Text/javascript "></script>
<script src=". /.. /scripts/fileinput/sortable.min.js "type=" Text/javascript "></script>
<script src=". /.. /scripts/fileinput/fileinput.js "type=" Text/javascript "></script>
<script src=". /.. /scripts/fileinput/lang.js "type=" Text/javascript "></script>
<script src=". /.. /scripts/fileinput/theme.min.js "type=" Text/javascript "></script>
<link href=". /.. /scripts/fileinput/fileinput.min.css "rel=" stylesheet "type=" Text/css "/> <script"
. /.. /scripts/fileinput/fileinput.min.js "type=" Text/javascript "></script>

After the successful introduction of the HTML code

<div class= "Item Form-group" >
                <label class= "Control-label col-md-3 col-sm-3 col-xs-12" >
                    file Address < /label>
                <div class= "col-md-6 col-sm-6 col-xs-12" > <input type= "file" Name= "Txt_file" id= "Txt_"
                    File "multiple class=" file-loading/>
                </div>
            </div>

Second, down is the initialization of the control, JS file

$ (function () {//0. initialize FileInput var ofileinput = new FileInput ();
        Ofileinput.init ("Txt_file", "@Url. Action" ("Importorder", "Portal", new {area = "servermqmanagermgr"}));



        });
            Initialize FileInput var FileInput = function () {var ofile = new Object (); Initializes the Fileinput control (first initialized) Ofile.init = function (Ctrlname, uploadurl) {var controls = $ (' # ' + C


                Trlname);  Initializes the style of the upload control Control.fileinput ({language: ' en ',//Set Language Uploadurl: Uploadurl,//uploaded address allowedfileextensions: [' zip '],///Receive file suffix Showupload:true,// 
                    Whether to show the upload button showcaption:false,//whether to display the title Browseclass: "Btn btn-primary",//button style
                    dropzoneenabled:false,//whether to show drag area//minimagewidth:50,//Picture minimum width minimageheight:50,//Pictures ofMinimum height//maximagewidth:1000,//maximum width of picture//maximageheight:1000,//maximum height of picture  The maxfilesize:0,//unit is KB, and if 0 indicates that the file size is not limited//minfilecount:0, maxfilecount:1,
                    Represents the maximum number of files that are allowed to be uploaded simultaneously enctype: ' Multipart/form-data ', validateinitialcount:true, Previewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>", msgfilestoom Any: "Select the number of files to upload ({n}) exceeds the maximum allowable value of {m}."



                "
                });
                    Event $ ("#txt_file") after the import file has been uploaded. On ("fileuploaded", function (event, data, Previewid, index) {
                    var IsError = Data.response.IsError;
                   if (IsError = = False) {var file= eval (' + data.response.Data + ') '); $ ("#FileAddress"). val (file.
                    Savepath);
                        $ ("#FileName"). Val (File.fupname);
                 Return   }
                });
        return ofile; };

Third, background upload (Uploadseehealtfile method is organized by oneself)

<summary>
        ///File upload
        ///</summary>
        ///<returns></returns>
        Public Jsonresult Importorder ()
        {
            var ofile = system.web.httpcontext.current.request.files["Txt_file"];

            String Savepath = "~/uploadfiles/";
            Uploadhelper up = new Uploadhelper ();
            Up. PostedFile = ofile;//file stream up
            . Savepath = Savepath;
            Up. Savenametype = UploadHelper.SaveFileNameType.Random;

            string fupname = Ofile.filename;
            int i = Fupname.lastindexof ("."); Gets the last "." in the filename. Index
            String newext = fupname.substring (i);//Get the file name extension up
            . Savenamenotext = Fupname.split ('. ') [0];
            Up. Filenamenoext = ". zip";
            Up. Uploadseehealtfile ();

            Return Json (Ajaxresult.success ("{' Savepath ': ' + Savepath +" ', ' fupname ': ' "+ Fupname + '} '," Save Success "));
        }

The initialization parameters of the collation:

showcaption: Displays the title of the file. The default value is true.
Showpreview: Whether to display a preview of the file. The default value is true.
Showremove: The Delete/Empty button is displayed. The default value is true.
Showupload: Whether to display the File Upload button. The default is the Submit button, unless the Uploadurl property is specified. The default value is true.
showcancel: Do you want to display the Cancel File upload button? This property is only visible in the Ajax upload thread. The default value is true.
Captionclass: Extra class on the title container. Type String.
Previewclass: Extra class on the preview area container. Type String.
MainClass: Add the main container in the file upload. Type String.
Initialdelimiter: The delimiter used to upload multiple files in the Initialpreview property. Default value: ' *$$* '.
Initialpreview: type string or array. The initialization preview that is displayed. You can pass in a simple HTML tag to display pictures, text, or files. If you set a string, a file is displayed in the initialization preview diagram. You can set the delimiter in the Initialdelimiter property to display multiple previews. If you set an array, all the files in the array are displayed in the initialization preview.
Allowedpreviewtypes: [' image '],
Allowedfileextensions: [' jpg ', ' png ', ' gif '],
maxfilesize:2000,