0
J'ai un formulaire où les utilisateurs peuvent télécharger des fichiers en utilisant le widget de téléchargement. Une fois téléchargé, je peux sortir/montrer l'aperçu, mais seulement si le type de fichier est une image comme jpg, png etc. Mais je dois être capable de montrer d'autres types de fichiers comme PSD, PDF. J'essaye d'implémenter imagemagick pour ceci, mais confus comment l'utiliser avec uploadcare car le widget utilise jquery pour récupérer image cdn. Alors que la plupart des didacticiels que j'ai trouvés en ligne sont pour php.Utilisez imagemagick avec uploadcare pour afficher la vignette pour PSD, les types de fichiers PDF
Vous pouvez jeter un oeil à l'extrait de widget dans ce violon: https://jsfiddle.net/kamela101/e6ac6jb4/
$ = uploadcare.jQuery;
// Create uploaded image list and append additional form fields to each item
function installWidgetPreviewMultiple(widget, list) {
widget.onChange(function(fileGroup) {
list.empty();
if (fileGroup) {
$.when.apply(null, fileGroup.files()).done(function() {
$.each(arguments, function(i, fileInfo) {
// display file preview
var $filename = fileInfo.name;// display file name
var $fileurl = fileInfo.cdnUrl;// get file url
var $src = fileInfo.cdnUrl + '-/resize/100x100/filename.jpg';// preview image source, resize to 100X100px and jpeg file type
// append preview and name and form fields to each file uploaded inside thumb_list
list.append(
$('<li class="thumb_list_item"><img src="' + $src+ '" alt="File Preview" class="preview-img">' + '<h4 class="filename">' + $filename + '</h4>' + '<div class="get-layer-wraper"><ul class="get-layer"><li class="layer-name"><label for="white-layer" class="layer-title">White Layer : </label></li><li><input id="white-layer" name="white-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="adhesive-layer" class="layer-title">Adhesive Layer : </label></li><li><input id="adhesive-layer" name="adhesive-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="block-layer" class="layer-title">Blocking Layer : </label></li><li><input id="block-layer" name="block-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="clear-layer" class="layer-title">Clear Layer : </label></li><li><input id="clear-layer" name="clear-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul></div></li>').appendTo(".thumb_list")
);
});
});
}
});
}
$(function() {
$('.upload-area').each(function() {
installWidgetPreviewMultiple(
uploadcare.MultipleWidget($(this).children('input')),
$(this).children('.thumb_list')
);
});
});