FileUpload ist eine große Datei -Upload -Komponente in reinem JavaScript im Ausland. Diese Komponente unterstützt Funktionen wie Shard -Upload, Breakpoint -Fortsetzung und mehrere Dateien.
Hier finden Sie eine Möglichkeit, die benutzerdefinierte Vorlage für Datei -Pload -Upload -Komponenten (fineUploaderBasic) zu verwenden:
Das Folgende ist der Konfigurationscode:
Front-End-Konfiguration:
<!--Definition button--><div id="basic_uploader_fine"><i></i>Select file</div><div id="triggerUpload">Click to upload</div><!--Show information--><div id="messages"></div><div id="cancelUpload">Cancel</div><div id="cancelAll">Cancel all</div><div id = "pauseUplepload"> Suspend Upload </div> <div id = "continuPload"> Fortsetzung hochladen </div> <script> $ (document) .ready (function () {$ fub = $ ('#BASIC_UPLOADER_FINE'); true, // Multi-File-Upload-Taste: $ fub [0], // Schaltfläche zum Audload-Schaltfläche: Falsch, // Wenn Sie nicht automatisch hochladen, rufen Sie die Upload-Stored-filess-Methode auf, um manuell hochzuladen // Die Upload-Datei-Validierung verifizieren. Absolute Adresse) Anfrage: {Endpoint: 'Server/Endpoint.php'}, Wiederholung: {EnableAuto: Falsch // Defaults to Falsch automatisch wiederholen}, Chunking: {enabled: true, agetize: 500, // Gruppengröße, Default ist 2M gleichzeitig: {aktiviert: TRUE: TRUE: TRUE: TRUE // Konkurrent gruppen, gruppe, sterault 3 gleich. "Server/Endpoint.php? Done" // Gruppen-Upload wird nach der Verarbeitung abgeschlossen}}, // Rückruffunktionsrückrufe: {// Datei startet hochladen OnSubMit: Funktion (ID, Dateiname) {$ messages.append ('<div id = "Datei- Dateiname) {$ ('#Datei-' + id) .AddClass ('alert-info') .html ('<img src = "client /laden.gif">' + 'initialisierung' + '"' ');}, // Fortschrittsbalken auf Progress: Funktion (id, filename, laden) {{if ({if) {if (if ({if) {if (if ({if) {if (if ({if) {if ({if) {if (if ({if) {if ({if) {if (if ({if) {if ({if) {if (if ({if). '%' + math.round (Total/1024) + 'KB'; 'Upload-Datei ...' + Fortschritt); '); 'Erfolgreich hochgeladen!' + '' + Dateiname + '' '); Funktion (Name, Grund, Maybexhrorxdr) {console.log (ID + '_' + Name + '_' + Grund); $ ('#cancelUpload'). Click (function () {Uploader.Cancel (0);}); $ ('#pauseUpload'). click (function () {uploader.pauseuPload (0);});PHP -Code:
//Handler.php Datei offizielle Website erfordert_once "Handler.php"; $ uploader = new UploadHandler (); // Dateityplimit $ uploader-> ungenSenxtens = array (); // Dateigrößenbegrenzung $ Uploader-> SizElimit = null; // Dateibox $ uploader-> inputName = "qqFile"; // Definieren Sie den Speicherort der gruppierten Dateien $ Uploader-> ChunksFolder = "Chunks"; Handler.Php-Code und fügte eine Ordnergenerierungsregel hinzu [Sie können es auch anpassen]) $ uploadDirectory = $ Uploader-> getPathName ('member_avatar'); if ($ method == "post") {Header ("Inhaltstyp: Text/Plain"); // Die Gruppe zusammenführen, nachdem das Gruppen-Upload abgeschlossen ist, wenn (isset ($ _ get ["Done"]) {$ result = $ uploader-> combinEchunks ($ uploadDirectory); // Gruppierte Dateien zusammenführen} else {// Hochload-Datei starten $ result = $ uploader-> handleUpload ($ uploadDirectory); // Erhalten Sie den hochgeladenen Namen $ result ["uploadName"] = $ uploader-> getUploadName (); } echo json_encode ($ result);} // Dateiverarbeitung else if ($ method == "delete") {$ result = $ uploader-> handledelete ($ uploadDirectory); echo json_encode ($ result);} else {header ("http/1.0 405 methode nicht erlaubt");}Das obige ist eine einfache benutzerdefinierte Vorlagenkonfiguration. Ich hoffe, dass es für das Lernen aller hilfreich ist.