BOOTSTRAP3 frame using bootstrap-table combined bootstrap-file input upload file and show progress bar __ Frame

BOOTSTRAP3 frame using bootstrap-table combined with bootstrap-file input using the Bootstrap3-dialog pop-up upload page listing uploaded files (supporting multiple file uploads) the use of a single page application in the site also used req Uire refers to the external JS file page All the required references, specific documents please go to the corresponding official website download ...

</pre><span style= "FONT-SIZE:14PX;" > file path structure as above </span></p><p><span style= "FONT-SIZE:14PX;" The >contentlist.html file code is as follows: </span></p><p><pre name= "code" class= "HTML" ><span style= " font-size:14px; " ><!  DOCTYPE html> The fileupload.html file code is as follows:


<span style= "FONT-SIZE:14PX;" ><!--Click the upload button to eject the upload page--> <div id= "Updating" class= "Form-group text-center" > <label> is uploading: <span Id= "Updated" ></span><span id= "Total" ></span></label> </div> <div id= " Filestablediv "> <div id=" samenamediv "class=" alert alert-warning alert-dismissible Fade in hidden "role=" alert "&
		Gt <p class= "Samenametip" > upload file has the same name file 0, whether confirm upload </p> <p> <button id= "nobtn" type= "button" class= "b TN btn-link "> No </button> <button id=" yesbtn "type=" button "class=" Btn Btn-link "> is </button> </p > </div> <table id= "filestable" class= "table" data-pagination= "false" data-unique-id= "index" > </ta ble> </div> <script type= "Text/javascript" > Require (["...). /..
	/js/mcm/filesupload "], function (filesupload) {Filesupload.start ();
}); </script></span> 
 
<span style= "FONT-SIZE:14PX;" >
</span>
 

corresponding Contentlist.js


<span style= "FONT-SIZE:14PX;" >/**
 * Content-file list Created by dyp330
 * Modify Time 2015-12-24
/define (function () {
    "use strict";
    function init () { 
        //Load upload page
		$ ("#uploadFilesDiv"). HTML ("");
	    $ ("#uploadFilesDiv"). Load ("mcm/filesupload.html");         
        Bind upload Component
        $ ("#uploadBtn"). Fileinput ({
            language: "en",
            showcaption:false,
            Showupload:false,
            Showremove:false,
            maxfilesnum:50,//maximum number of files
            overwriteinitial:false,
            allowedfiletypes: [PNG] , "JPG", "gif"],
            browseclass: "Btn btn-info"
        });
        Modify the text of the Upload file button-Define
        $ ("#uploadBtn") according to requirements. Prev ("Span.hidden-xs"). html ("Upload file");
    
    function Start () {
        init ();
    }
    return {
        Start:start
    };
}
; </span>
 

The most important upload JS

Filesupload.js

 

 
 

/** * Content-File Upload Created by dyp330 * Modify Time 2015-12-25/define (function () {"Use strict"; var $updatedNum = $ ("#updated"),//uploaded number $totalNum = $ ("#total"), $updating = $ ("#updating"), $filesTable = NULL, $FILESTABLEDIV = NULL, xhr_process,//display process Curuploadingrow, operateevents;//the operator in the table The parameter//initialization table of the method binding only deletes the action item function Operatedelete () {return [' <a class= ' fileinput-remove fi Leinput-remove-button "href=" javascript:void (0) "title=" delete ">", ' <i class= ' Icon-default icon-delete-activ
    E "></i>", ' </a> '].join (');
            //Modify Delete function Tabledelbind (num) {$filesTable. bootstraptable ("Updatecell") in the list of actions in the table, {
    Index:num, field: ' Operate ', Value:operatedelete ()});
      //Update table status list function Updatestatecell (num, statevalue) {$filesTable. bootstraptable ("Updatecell", {      Index:num, field: ' State ', value:statevalue}); ///Single File Upload function FileUpload (filesobj,i) {var fd, Uploadurl = "<span style=" color: #ff6 666; " > I need to upload the address </span> ", updatednum; Uploaded number if (i = = filesobj.length) {//Last Pass Setup OK button available $ ("#dialogOk"). Removeclass ("Disabled
            "). Prop (" disabled ", false);
        Return
		FD = new FormData ();
		Fd.append (' file ', filesobj[i]);
		Curuploadingrow = i; $.ajax ({url:uploadurl, type: ' POST ', DATA:FD, Cache:false, Contenttype:false, PROCESSDATA:FA  LSE, Xhr:xhr_process, success:function (Result) {//upload successful number plus one updatednum = parseint ($updatedNum. Text (),
				10) + 1;
				$updatedNum. HTML (updatednum); Bind the current row to a successful upload ID $filesTable. bootstraptable ("Updatecell", {index:i, field: ' ID ', Value:result
				. files[0].id}); Updatestatecell (i, "upload the finishedinto ");
				Tabledelbind (i);
				settimeout (function () {FileUpload (filesobj, backnamelist, i + 1);
			}, 0); Error:function (Result) {Updatestatecell (i, <span class= ' red ' > upload failed </span&gt
				;");
				settimeout (function () {FileUpload (filesobj, backnamelist, i + 1);
			}, 0);            
    }
		});
    }//Multiple file Upload function Uploadfilesajax (filesobj, backnamelist) {fileupload (filesobj, backnamelist, 0);
            /** * Detection attachment upload status/function uploadprogress (evt) {var loaded = evt.loaded,//upload size Total = evt.total,//attachment size percent = math.floor (* * loaded/total);
    The percentage that has been uploaded Updatestatecell (curuploadingrow, percent + "%");
        //Show upload progress xhr_process = function () {var xhr = $.ajaxsettings.xhr ();
        if (uploadprogress && xhr.upload) {Xhr.upload.addEventListener ("Progress", uploadprogress, false); Return XHR

    };
        function Operatesize (value) {var size = "";
		if (value > 1048576) {size = (value/1024/1024). toFixed (1) + "MB";
			else {if (value > 1024) {size = parseint (value/1024, ten) + "KB";
			else {size = ' < 1KB ';
    } return size; }//delete function DeleteData (fId, index) {var delurl = "<span style=" color: #ff0000;
        > Write your own address </span> "+ fId; if (fId!== "") {//First delete database data $.ajax {url:delurl, type: ' Delete ', Cache:false, async:false,//sync deletion because you have to upload all the files at the same time when you click the Cancel button Conten Ttype:false, Processdata:false, success:function (result) {$fil
                Estable.bootstraptable (' Removebyuniqueid ', [index]); }, Error:function (data) {Bootstrapdialog.alert ({TiTLE: "Action Prompt", message: "Delete Failed"});
        }
            });
        else {$filesTable. bootstraptable (' Removebyuniqueid ', [index]); } operateevents ={' click. Fileinput-remove ': function (E, value, row, index) {deletedata (ro
        W.id, Row.index);

    }
    };
        Initialize the table function inituploadtable (dataobj) {$filesTable = $ ("#filesTable") of the Upload text pop-up box;  Binding Uploadfilesdiv filestable dataobj $filesTable. Bootstraptable ({columns: [{field
            : ' id ', title: ' File ID '}, {field: ' Index ', title: ' Serial number ' }, {field: ' Name ', title: ' File Name '}, {field: ' Siz E ', title: ' Size ', formatter:operatesize}, {field: ' State '
        , title: ' State '    }, {field: ' Operate ', Title: ' Operations ', events:operateevents
	    }], Data:dataobj, rowstyle:rowstyle});
    $filesTable. Bootstraptable (' Hidecolumn ', ' id ');
        function Bindevent () {$filesTableDiv = $ ("#filesTableDiv"); Upload file filebatchselected $ ("#uploadBtn"). On (' filebatchselected ', function (event, files) {var tabled
                ATA = [],//table data set//TR data set in table, upload total, uploaded number, '-1 ' on behalf of the uploaded path, process dataItem = null,
                Total = files.length, updated = 0, Process = "0%", i = 0,
            GetId = [], getidlength, uploadfiledialog = null; Verify that the total number of files cannot exceed 50 if (Sum >) {bootstrapdialog.alert ({title:) Message Reminder ", Message:" The file has been selected more than one upload of up to 50 quantity limit, clickAfter the need to upload the file "});  else {for (i = 0, i < total; i = 1) {DataItem = {' id ' : ', ' index ': i + 1, ' name ': Files[i].name, ' s
                    Ize ': files[i].size, ' state ': process};
                A collection of Tabledata.push (DataItem) bound to the list of uploaded files; }//Show pop-up uploadfiledialog = new Bootstrapdialog ({title:function (
                        ) {$updatedNum. html (updated);
                        $totalNum. HTML ("/" + total);
                    return $updating; }, CssClass: ' Dialogshow ', Closable:false, Closebybackdrop
	            : false, Message:function () {//binding table data, returning Table object        Inituploadtable (Tabledata);
                    return $FILESTABLEDIV; }, Type:BootstrapDialog.TYPE_DEFAULT, Draggable:true, Butt  ONS: [{id: ' Dialogok ', Label: ' OK ', CssClass:
                            ' Btn-primary disabled ', Autospin:false, Action:function (dialog) {
                        Dialog.close ();
                        }, {id: ' dialogcancel ', Label: ' Cancel ', CssClass: ' Btn-default ', Autospin:false, action:function (Dialog)
							{$ ("#sameNameDiv"). AddClass ("hidden");
                        Delete all uploaded files//Get the ID of the uploaded file GetId = $filesTable. Bootstraptable (' getoptions '). Data;    Getidlength = Getid.length;
                                    for (i = getIdLength-1 i >= 0; I-= 1) {if (Getid[i]!== undefined) {
                                DeleteData (Getid[i].id, Getid[i].index);
                        //Whether you need to cancel all uploaded files Dialog.close ();
                }}], callback:function (Result) {}});
            Uploadfiledialog.open ();
    }
        });
    function Start () {bindevent ();
} return {Start:start};
 });