Good afternoon, gentlemen, I'm trying to apply the jQuery File Upload plugin. It really is a simple and intuitive plugin, the problem is that I need to create, within the same page, several divs of image uploads, eg:
//upload
$(function() {
// Change this to the location of your server-side upload handler:
var url = 'tmp/inspecao/',
uploadButton = $('<button type="button"/>')
.addClass('btn btn-primary')
.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: 999000,
// 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) {
var aux = event.target.id.split(':');
data.context = $('<div class="img">').appendTo('#files' + aux[1]);
$.each(data.files, function(index, file) {
var node = $('<p/>').append($('<span class="text-primary"/>').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($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Enviar')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function(e, data) {
$.each(data.result.files, function(index, file) {
if (file.url) {
var link = $('<span class="text-success">').text('Enviada');
$(data.context.children()[index]).wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function(e, data) {
$.each(data.files, function(index) {
var error = $('<span class="text-danger"/>').text('Falha no envio');
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
//upload<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><divclass="up1" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
<input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
</span>
<br>
<br>
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
<br>
</div>
<div class="up2" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
<input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
</span>
<br>
<br>
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
<br>
</div>
<div class="up3" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
<input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
</span>
<br>
<br>
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
<br>
</div> The problem is that all thumbnails (both upload 1 , 2 and 3 ) go to upload 1 .
In the face of this, I wonder if there is any way to call the function just inside every div . ( up1 , up2 , up3 ...). Thank you all!