Prima di tutto, vorrei specificare che questa è un'incapsulazione secondaria del controllo di upload open source di WebUploader, e il livello sottostante è ancora implementato da WebUploader, solo per usarlo in modo più conciso.
Diamo un'occhiata a WebUploader
Introduzione:
WebUploader è un semplice componente moderno di upload file basato su HTML5, sviluppato dal team Baidu WebFE (FEX). Nei browser moderni, può sfruttare appieno i vantaggi di HTML5, senza però abbandonare il browser IE mainstream, utilizzando il runtime originale FLASH, compatibile con IE6+, iOS 6+ e Android 4+. Lo stesso metodo di chiamata può essere utilizzato dagli utenti in qualsiasi momento quando sono disponibili i due insiemi di runtime.
L'uso di grandi file shard e il caricamento simultaneo migliora notevolmente l'efficienza del caricamento file.
Indirizzo ufficiale del sito web: http://fex.baidu.com/webuploader/
Se sei interessato a giocare da solo, puoi andare direttamente sul sito ufficiale
Iniziamo il testo:
Da quanto sopra, possiamo vedere che la funzione WebUploader di Baidu è effettivamente molto potente, ma come tutti i controlli di upload, è più macchinosa da usare, come segue:
Devi prima consultare diverse librerie correlate,
Poi scrivi bene l'HTML
Non vogliamo tutto questo!, solo due frasi, ricevete il nostro upload. Come segue:
Ho scritto che lo stile bootstrap di CSS farà riferimento automatico,
Supporta il caricamento di più file,
Identificare automaticamente i file duplicati,
Caricamento automatico opzionale e caricamento manuale,
Puoi renderizzare più controlli di upload in una pagina senza conflitti
Poi alcuni parametri di configurazione relativi a WebUploader possono essere configurati da solo.
Andiamo direttamente al widget JS che ho confezionato (un po' disordinato, facciamo con certezza):
Alcuni parametri correlati e più importanti sono stati scritti con appunti, e puoi consultarvi da solo.
Allora usiamolo.
Scrivi il nostro JS e HTML come segue:
Va bene, vale la pena notarlo
Per i parametri in powerWebUpload, si prega di consultare l'API sul sito ufficiale
Il metodo GetFilesAddress() restituirà un array di percorsi di file dopo il caricamento, e puoi recuperarlo da solo.
Infine, l'ultima demo che ho scritto, implementata usando Asp.net MVC, puoi scaricarla da solo:
Baidu Netdisk:
Link: http://pan.baidu.com/s/1o8B0xOQ Password: 9kws
Originale: http://www.cnblogs.com/GuZhenYin/p/5584272.html
|
Pubblicato su 27/06/2016 15:13:30
|
|
|
|
Pubblicato su 04/05/2020 21:03:04