Configurable Multi-archivo Uploader-SlashUploader

Vista prévia

Descripción

SlashUploader es un cargador de archivos simple, flexible, de navegador cruzado y altamente personalizable escrito en JavaScript puro.

Main features:

• Soporta carga de archivos individuales y múltiples.
• Arrastre y suelte la selección de archivos.
• También se admite la carga de fragmentos.
• Vista previa de imagen antes de subirla.
• Restringe los tipos de archivo.
• Visual upload progress with a progress bar.
• Validación de archivos.
• Opciones útiles y controladores de eventos

¿Cómo funciona?

Importe los archivos JavaScript y CSS de SlashUploader al HTML.

<script src='SlashUploader.min.js'></script>
 <link href='SlashUploader.min.css' rel='stylesheet'>

Cree un elemento de marcador de posición para el cargador de archivos.

<div id='example'></div>

Inicialice SlashUploader para generar un cargador de archivos predeterminado.

var myUploader = new SlashUploader (document.getElementById("example"));

Todas las opciones posibles para personalizar el cargador de archivos.

// "image/*", "video/*", "text/html", ".csv, application/vnd.ms-excel", etc
acceptOnlyFilesTypes: null,

// allowed file extensions
// e.g. ["mp4", "ogg"];
allowedFilesExtensions: null,

// max file size in kb
allowedMaxFileSize: null,

// If value is set to true, the plugin is being wraped under the selected DOM element.
customHTML: false,

// custom validation function
customValidation: null,

// disable user interaction
disabled: false,

// in ms
displayErrorDuration: 4500,

 // recieve files metadata upon selection
doGetFileMetadata: true,

// enable drag and drop
enableDropFiles: true,

// iframe gateway
iframeGateway: 'SlashUploader/iframe_gateway.html',

// maximum characters length to display for a file name
maxFileChars: 22,

// maximum amount of files
maxFiles: 9999,

// null, 'inline', 'bar'
progressAnimationType: 'inline',

// reset file list after upload
resetFilesOnEachUpload: true,

// enable RTL
rtl: false,

// uploadChunk - Script to upload file chunk, if chunks upload is being used.
// combineChunks - Script to combine chunks back to a file, if chunks upload is being used.
// uploadStream - Script to upload file as stream, if stream upload is being used.
// uploadThroughIframe - Script to upload file using Iframe gateway, if Iframe upload is being used.
// fileNameVariableName - File name variable to expect back from server, for a successful upload.
// fileUrlVariableName - File URL variable to expect back from server, for a successful upload.
// errorVariableName - Error variable to expect back from server, if server script failed.
serverScripts: {},

// shows detailed error from server
showDetailedErrorFromServer: true,

// shows uploaded files
showUploadedFiles: true,

// HTML template
uploadedFileHtml: '<a href='{{current_file_path}}' target='_blank'>{{current_file_name}}</a>',

// gets or sets the current file list
uploadedFiles: null,

// allows file chunks
uploadFileInChunks: true,

Event handlers.

myUploader.onCanceled = function () {

console.log ("Canceled");
};

myUploader.onError = function (errors) {

console.log (errors);
};

myUploader.onFileDeleted = function (deletedFile, files) {

console.log ("Deleted file:", deletedFile);

console.log ("Remaining files:", files);
};

myUploader.onFilesProgress = function (curUploadingFileProgress, curUploadingFileIndex, totalFilesToUpload) {

var text = "Uploaded "+Math.floor(curUploadingFileProgress*100)+"% (file "+(curUploadingFileIndex+1)+"/"+totalFilesToUpload+")";

console.log (text);
};

myUploader.onFilesSelected = function (files) {

console.log (files);
};

myUploader.onFilesUploaded = function (files) {

for (var i=0; i<files.length; i++) {



var file = files[i];



console.log ("File number "+(i+1));



console.log ("Name: "+file[this.serverScripts.fileNameVariableName]);



console.log ("URL: "+file[this.serverScripts.fileUrlVariableName]);

}
};

Registro de cambios

12/23/2018

• v1.5.5