jQuery proporciona un complemento de carga rápido de jQuery Filer para una fácil implementación de la carga de archivos. Proporciona funciones como la carga instantánea de archivos, la adición de archivos, la eliminación de archivos, las selecciones múltiples, la compatibilidad con arrastrar y soltar junto con otras validaciones de archivos.
Descargue los archivos necesarios para incluirlos en su carpeta de trabajo e inclúyalos en la sección principal como se muestra en los siguientes ejemplos . El programador puede ajustar todas las rutas de archivo en su código según lo organizado en la carpeta de trabajo.
Nota: los ID de control de entrada de HTML se proporcionan como «filer_input» y «filer_input2» para que coincidan con el código custom.js del complemento .
Ejemplo 1: en el siguiente ejemplo, se muestra la implementación básica de carga de archivos mediante el complemento jQuery.Filer . Los programadores pueden probar otras funciones según los requisitos del proyecto.
HTML
<!DOCTYPE>
<html lang="html">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery Filer Plugin</title>
<!-- Google Fonts -->
<link href=
"https://fonts.googleapis.com/css?family=Roboto+Condensed"
rel="stylesheet">
<!-- Styles -->
<link href="jquery.filer.css" rel="stylesheet">
<!-- Javascript -->
<script src="http://code.jquery.com/jquery-3.1.0.min.js"
crossorigin="anonymous">
</script>
<script src="jquery.filer.min.js"
type="text/javascript">
</script>
<script src="custom.js" type="text/javascript"></script>
<style>
body {
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
color: #47505d;
background-color: #ffffff;
margin: 0;
padding: 18px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<b>jQuery Filer Plugin</b>
<p></p>
<div id="content">
<!-- File upload form -->
<form action="upload_form.php" method="post"
enctype="multipart/form-data">
<input type="file" name="files[]"
id="filer_input" multiple="multiple">
<input type="submit" value="Submit">
</form>
<!-- end of File upload-->
</div>
</body>
</html>
Código jQuery utilizado en el ejemplo anterior: El siguiente archivo de código custom.js es proporcionado por el complemento jQuery.Filer .
Javascript
$(document).ready(function() {
$('#filer_input').filer({
showThumbs: true,
addMore: true,
allowDuplicates: false
});
});
Producción:
Nota: El archivo cargado se puede ver en la carpeta «cargas» de acuerdo con la ruta del archivo de carga proporcionada por el programador.
Ejemplo 2: En el siguiente ejemplo, se muestra la función de arrastrar y soltar. Los archivos seleccionados se previsualizan en la parte inferior con el estado de éxito.
HTML
<!DOCTYPE>
<html lang="html">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery Filer DragnDrop Images</title>
<!-- Google Fonts -->
<link href=
"https://fonts.googleapis.com/css?family=Roboto+Condensed"
rel="stylesheet">
<!-- Styles -->
<link href="jquery.filer.css" rel="stylesheet">
<link href="jquery.filer-dragdropbox-theme.css"
rel="stylesheet">
<!-- Javascript -->
<script src="http://code.jquery.com/jquery-3.1.0.min.js"
crossorigin="anonymous">
</script>
<script src="jquery.filer.min.js"
type="text/javascript">
</script>
<script src="custom.js" type="text/javascript"></script>
<style>
body {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #47505d;
padding: 18px;
background-color: #ffffff;
margin: 0;
}
.jFiler {
font-family: inherit;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<b>jQuery Filer Plugin</b>
<p></p>
<div id="content">
<!-- For drag and drop of images -->
<input type="file" name="files[]"
id="filer_input2" multiple="multiple">
<!-- end of drag and drop of images -->
</div>
</body>
</html>
Código jQuery utilizado en el ejemplo anterior: el complemento jQuery.Filer proporciona el archivo custom.js .
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA