multiple - ¿Alguien puede explicar cómo implementar el plugin jQuery File Upload?

upload file with jquery

Question

EDITAR:

Esto todavía parece estar recibiendo tráfico, así que explicaré lo que terminé haciendo. Finalmente conseguí que el complemento funcionara siguiendo el tutorial de Subrat, que es la respuesta aceptada. Sin embargo, jQuery File Upload es una verdadera molestia, y si estás buscando un simple complemento de carga de archivos, te recomendaría Uploadify (¡gracias, CORSAIR!). Como señaló una respuesta, solo es gratis para uso no comercial.

Fondo

Intento utilizar la carga de archivos jQuery de blueimp para permitir que los usuarios carguen archivos. Fuera de la caja funciona perfectamente , siguiendo las instrucciones de configuración. Pero para usarlo prácticamente en mi sitio web, quiero poder hacer un par de cosas:

• Incluir el cargador en cualquiera de mis páginas existentes
• Cambiar el directorio de los archivos cargados

Todos los archivos para el complemento se encuentran en una carpeta debajo de la raíz.

He intentado...

• Mover la página de demostración a la raíz y actualizar las rutas para las secuencias de comandos necesarias
• Cambiando las opciones ''upload_dir'' y ''upload_url'' en el archivo UploadHandler.php como se sugiere here .
• Cambiar la URL en la segunda línea de la demo javascript

En todos los casos, se muestra la vista previa y se ejecuta la barra de progreso, pero los archivos no se pueden cargar, y aparece este error en la consola: Uncaught TypeError: Cannot read property ''files'' of undefined . No entiendo cómo funcionan todas las partes del complemento, lo que dificulta la depuración.

Código

El javascript en la página de demostración:

$(function () { ''use strict''; // Change this to the location of your server-side upload handler: var url = ''file_upload/server/php/UploadHandler.php'', uploadButton = $(''<button/>'') .addClass(''btn'') .prop(''disabled'', true) .text(''Processing...'') .on(''click'', function () { var $this = $(this), data = $this.data(); $this .off(''click'') .text(''Abort'') .on(''click'', function () { $this.remove(); data.abort(); }); data.submit().always(function () { $this.remove(); }); }); $(''#fileupload'').fileupload({ url: url, dataType: ''json'', autoUpload: false, acceptFileTypes: /(/.|//)(gif|jpe?g|png)$/i, maxFileSize: 5000000, // 5 MB // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), previewMaxWidth: 100, previewMaxHeight: 100, previewCrop: true }).on(''fileuploadadd'', function (e, data) { data.context = $(''<div/>'').appendTo(''#files''); $.each(data.files, function (index, file) { var node = $(''<p/>'') .append($(''<span/>'').text(file.name)); if (!index) { node .append(''<br>'') .append(uploadButton.clone(true).data(data)); } node.appendTo(data.context); }); }).on(''fileuploadprocessalways'', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node .prepend(''<br>'') .prepend(file.preview); } if (file.error) { node .append(''<br>'') .append(file.error); } if (index + 1 === data.files.length) { data.context.find(''button'') .text(''Upload'') .prop(''disabled'', !!data.files.error); } }).on(''fileuploadprogressall'', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $(''#progress .bar'').css( ''width'', progress + ''%'' ); }).on(''fileuploaddone'', function (e, data) { $.each(data.result.files, function (index, file) { var link = $(''<a>'') .attr(''target'', ''_blank'') .prop(''href'', file.url); $(data.context.children()[index]) .wrap(link); }); }).on(''fileuploadfail'', function (e, data) { $.each(data.result.files, function (index, file) { var error = $(''<span/>'').text(file.error); $(data.context.children()[index]) .append(''<br>'') .append(error); }); }).prop(''disabled'', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : ''disabled''); }); Estoy sorprendido por la falta de documentación; parece que debería ser algo simple de cambiar. Agradecería si alguien pudiera explicarme cómo hacer esto.

Answer 1

Acabo de pasar 2 horas luchando con jQuery Upload, pero me rendí por la cantidad de dependencias (tenía 13 archivos JS incluidos para obtener todos los detalles).

Hice un poco más de búsqueda y me encontré con un proyecto ordenado llamado Dropzone.js , que no tiene ninguna dependencia.

El autor también ha creado una demostración de arranque que fue inspirada por el plugin jQuery File Upload.

Espero que esto le ahorre a alguien más algo de tiempo.

Answer 2

Echa un vistazo a la función de arrastrar y soltar la imagen con la vista previa de la imagen con el uso del complemento jquery dropper.

HTML

<div class="target" width="78" height="100"><img /></div>

JS

$(".target").dropper({
action: "upload.php",
}).on("start.dropper", onStart);
function onStart(e, files){
console.log(files[0]);
image_preview(files[0].file).then(function(res){
$(''.dropper-dropzone'').empty();
//$(''.dropper-dropzone'').css("background-image",res.data);
$(''#imgPreview'').remove();
$(''.dropper-dropzone'').append(''<img id="imgPreview"/><span style="display:none">Drag and drop files or click to select</span>'');
var widthImg=$(''.dropper-dropzone'').attr(''width'');
$(''#imgPreview'').attr({width:widthImg});
$(''#imgPreview'').attr({src:res.data});
})
}
function image_preview(file){
var def = new $.Deferred();
var imgURL = '''';
if (file.type.match(''image.*'')) {
//create object url support
var URL = window.URL || window.webkitURL;
if (URL !== undefined) {
imgURL = URL.createObjectURL(file);
URL.revokeObjectURL(file);
def.resolve({status: 200, message: ''OK'', data:imgURL, error: {}});
}
//file reader support
else if(window.File && window.FileReader)
{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
imgURL = reader.result;
def.resolve({status: 200, message: ''OK'', data:imgURL, error: {}});
}
}
else {
def.reject({status: 1001, message: ''File uploader not supported'', data:imgURL, error: {}});
}
}
else
def.reject({status: 1002, message: ''File type not supported'', error: {}});
return def.promise();
}
$(''.dropper-dropzone'').mouseenter(function() {
$( ''.dropper-dropzone>span'' ).css("display", "block");
});
$(''.dropper-dropzone'').mouseleave(function() {
$( ''.dropper-dropzone>span'' ).css("display", "none");
});

CSS

.dropper-dropzone{
width:78px;
padding:3px;
height:100px;
position: relative;
}
.dropper-dropzone>img{
width:78px;
height:100px;
margin-top=0;
}
.dropper-dropzone>span {
position: absolute;
right: 10px;
top: 20px;
color:#ccc;
}
.dropper .dropper-dropzone{
padding:3px !important
}

Demo Jsfiddle

Answer 3

Estaba buscando una funcionalidad similar hace algunos días y encontré un buen tutorial en tutorialzine. Aquí hay un ejemplo de trabajo. El tutorial completo se puede encontrar here .

Forma simple para mantener el diálogo de carga de archivos:

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="uploadctl" multiple />
<ul id="fileList">
<!-- The file list will be shown here -->
</ul>
</form>

Y aquí está el código jQuery para cargar los archivos:

$(''#upload'').fileupload({
// This function is called when a file is added to the queue
add: function (e, data) {
//This area will contain file list and progress information.
var tpl = $(''<li class="working">''+
''<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />''+
''<p></p><span></span></li>'' );
// Append the file name and file size
tpl.find(''p'').text(data.files[0].name)
.append(''<i>'' + formatFileSize(data.files[0].size) + ''</i>'');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way.
tpl.find(''input'').knob();
// Listen for clicks on the cancel icon
tpl.find(''span'').click(function(){
if(tpl.hasClass(''working'')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find(''input'').val(progress).change();
if(progress == 100){
data.context.removeClass(''working'');
}
}
});
//Helper function for calculation of progress
function formatFileSize(bytes) {
if (typeof bytes !== ''number'') {
return '''';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + '' GB'';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + '' MB'';
}
return (bytes / 1000).toFixed(2) + '' KB'';
}

Y aquí está el ejemplo del código PHP para procesar los datos:

if($_POST) {
$allowed = array(''jpg'', ''jpeg'');
if(isset($_FILES[''uploadctl'']) && $_FILES[''uploadctl''][''error''] == 0){
$extension = pathinfo($_FILES[''uploadctl''][''name''], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo ''{"status":"error"}'';
exit;
}
if(move_uploaded_file($_FILES[''uploadctl''][''tmp_name''], "/yourpath/." . $extension)){
echo ''{"status":"success"}'';
exit;
}
echo ''{"status":"error"}'';
}
exit();
}

El código anterior se puede agregar a cualquier formulario existente. Este programa carga automáticamente imágenes, una vez que se agregan. Esta funcionalidad se puede cambiar y puede enviar la imagen, mientras envía su formulario existente.

Actualicé mi respuesta con el código actual. Todos los créditos para el autor original del código.

Fuente: here

Answer 4

Este es un buen complemento angular para cargar archivos, ¡y es gratis!

carga de archivo angular

Answer 5

Hola, prueba el enlace abajo es muy fácil. Estuve atrapado por mucho tiempo y soluciona mi problema en pocos minutos. http://simpleupload.michaelcbrook.com/#examples

Answer 6

Luché con este complemento durante un tiempo en Rails, y luego alguien lo modificó para obsoleta todo el código que había creado.

Aunque parece que no estás usando esto en Rails, sin embargo, si alguien está usándolo, echa un vistazo a esta gem . La fuente está aquí -> jQueryFileUpload Rails .

Actualizar:

Para satisfacer al comentarista, actualicé mi respuesta. Esencialmente, " gem , aquí está el código fuente ". Si desaparece, hazlo a lo largo.

Answer 7

Para el complemento UI, con la página jsp y Spring MVC ..

Muestra html . Necesita estar dentro de un elemento de formulario con un atributo id de carga de archivos

 <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="fileupload-buttonbar">
<div>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files</span>
<input id="fileuploadInput" type="file" name="files[]" multiple>
</span>
<%-- https://.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined --%>
<button type="button" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload-ui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var maxFileSizeBytes = ${maxFileSizeBytes};
if (maxFileSizeBytes < 0) {
//-1 or any negative value means no size limit
//set to undefined
//https://.com/questions/5795936/how-to-set-a-javascript-var-as-undefined
maxFileSizeBytes = void 0;
}
//https://github.com/blueimp/jQuery-File-Upload/wiki/Options
//https://.com/questions/34063348/jquery-file-upload-basic-plus-ui-and-i18n
//https://.com/questions/11337897/how-to-customize-upload-download-template-of-blueimp-jquery-file-upload
$(''#fileupload'').fileupload({
url: ''${pageContext.request.contextPath}/app/uploadResources.do'',
fileInput: $(''#fileuploadInput''),
acceptFileTypes: /(/.|//)(jrxml|png|jpe?g)$/i,
maxFileSize: maxFileSizeBytes,
messages: {
acceptFileTypes: ''${fileTypeNotAllowedText}'',
maxFileSize: ''${fileTooLargeMBText}''
},
filesContainer: $(''.files''),
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $(''<tr class="template-upload fade">'' +
''<td><p class="name"></p>'' +
''<strong class="error text-danger"></strong>'' +
''</td>'' +
''<td><p class="size"></p>'' +
''<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">'' +
''<div class="progress-bar progress-bar-success" style="width:0%;"></div></div>'' +
''</td>'' +
''<td>'' +
(!index && !o.options.autoUpload ?
''<button class="btn btn-primary start" disabled>'' +
''<i class="glyphicon glyphicon-upload"></i> '' +
''<span>${startText}</span>'' +
''</button>'' : '''') +
(!index ? ''<button class="btn btn-warning cancel">'' +
''<i class="glyphicon glyphicon-ban-circle"></i> '' +
''<span>${cancelText}</span>'' +
''</button>'' : '''') +
''</td>'' +
''</tr>'');
row.find(''.name'').text(file.name);
row.find(''.size'').text(o.formatFileSize(file.size));
if (file.error) {
row.find(''.error'').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $(''<tr class="template-download fade">'' +
''<td><p class="name"></p>'' +
(file.error ? ''<strong class="error text-danger"></strong>'' : '''') +
''</td>'' +
''<td><span class="size"></span></td>'' +
''<td>'' +
(file.deleteUrl ? ''<button class="btn btn-danger delete">'' +
''<i class="glyphicon glyphicon-trash"></i> '' +
''<span>${deleteText}</span>'' +
''</button>'' : '''') +
''<button class="btn btn-warning cancel">'' +
''<i class="glyphicon glyphicon-ban-circle"></i> '' +
''<span>${clearText}</span>'' +
''</button>'' +
''</td>'' +
''</tr>'');
row.find(''.name'').text(file.name);
row.find(''.size'').text(o.formatFileSize(file.size));
if (file.error) {
row.find(''.error'').text(file.error);
}
if (file.deleteUrl) {
row.find(''button.delete'')
.attr(''data-type'', file.deleteType)
.attr(''data-url'', file.deleteUrl);
}
rows = rows.add(row);
});
return rows;
}
});
});
</script>

Carga de ejemplo y controladores de solicitud de eliminación

 @PostMapping("/app/uploadResources")
public @ResponseBody
Map<String, List<FileUploadResponse>> uploadResources(MultipartHttpServletRequest request,
Locale locale) {
//https://github.com/jdmr/fileUpload/blob/master/src/main/java/org/davidmendoza/fileUpload/web/ImageController.java
//https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler
Map<String, List<FileUploadResponse>> response = new HashMap<>();
List<FileUploadResponse> fileList = new ArrayList<>();
String deleteUrlBase = request.getContextPath() + "/app/deleteResources.do?filename=";
//http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/multipart/MultipartRequest.html
Iterator<String> itr = request.getFileNames();
while (itr.hasNext()) {
String htmlParamName = itr.next();
MultipartFile file = request.getFile(htmlParamName);
FileUploadResponse fileDetails = new FileUploadResponse();
String filename = file.getOriginalFilename();
fileDetails.setName(filename);
fileDetails.setSize(file.getSize());
try {
String message = saveFile(file);
if (message != null) {
String errorMessage = messageSource.getMessage(message, null, locale);
fileDetails.setError(errorMessage);
} else {
//save successful
String encodedFilename = URLEncoder.encode(filename, "UTF-8");
String deleteUrl = deleteUrlBase + encodedFilename;
fileDetails.setDeleteUrl(deleteUrl);
}
} catch (IOException ex) {
logger.error("Error", ex);
fileDetails.setError(ex.getMessage());
}
fileList.add(fileDetails);
}
response.put("files", fileList);
return response;
}
@PostMapping("/app/deleteResources")
public @ResponseBody
Map<String, List<Map<String, Boolean>>> deleteResources(@RequestParam("filename") List<String> filenames) {
Map<String, List<Map<String, Boolean>>> response = new HashMap<>();
List<Map<String, Boolean>> fileList = new ArrayList<>();
String templatesPath = Config.getTemplatesPath();
for (String filename : filenames) {
Map<String, Boolean> fileDetails = new HashMap<>();
String cleanFilename = ArtUtils.cleanFileName(filename);
String filePath = templatesPath + cleanFilename;
File file = new File(filePath);
boolean deleted = file.delete();
if (deleted) {
fileDetails.put(cleanFilename, true);
} else {
fileDetails.put(cleanFilename, false);
}
fileList.add(fileDetails);
}
response.put("files", fileList);
return response;
}

Clase de muestra para generar la respuesta json requerida

 public class FileUploadResponse {
//https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler
private String name;
private long size;
private String error;
private String deleteType = "POST";
private String deleteUrl;
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}
/**
* @return the size
*/
public long getSize() {
return size;
}
/**
* @param size the size to set
*/
public void setSize(long size) {
this.size = size;
}
/**
* @return the error
*/
public String getError() {
return error;
}
/**
* @param error the error to set
*/
public void setError(String error) {
this.error = error;
}
/**
* @return the deleteType
*/
public String getDeleteType() {
return deleteType;
}
/**
* @param deleteType the deleteType to set
*/
public void setDeleteType(String deleteType) {
this.deleteType = deleteType;
}
/**
* @return the deleteUrl
*/
public String getDeleteUrl() {
return deleteUrl;
}
/**
* @param deleteUrl the deleteUrl to set
*/
public void setDeleteUrl(String deleteUrl) {
this.deleteUrl = deleteUrl;
}
}

Ver https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.html

Answer 8

Puedes usar uploadify este es el mejor plugin jquery multiupload que he usado.

La implementación es fácil, el soporte del navegador es perfecto.

Answer 9

También tuve problemas con esto, pero lo puse en funcionamiento una vez que descubrí cómo funcionan las rutas en UploadHandler.php: upload_dir y upload_url son las únicas configuraciones que se deben tener en cuenta para que funcione. También verifique los registros de errores de su servidor para información de depuración.