0
사용자가 업로드 관리 위젯을 사용하여 파일을 업로드 할 수있는 양식이 있습니다. 업로드 한 후에는 파일 형식이 jpg, png 등의 이미지 인 경우에만 미리보기를 표시하거나 표시 할 수 있지만 PSD, PDF와 같은 다른 파일 형식에서도 표시 할 수 있어야합니다. 나는 이것을 위해 imagemagick을 구현하려하지만 위젯이 이미지 cdn을 가져 오기 위해 jquery를 사용하여 업로드 관리와 함께 사용하는 방법을 혼란스럽게합니다. 반면에 대부분의 온라인 튜토리얼은 PHP 용입니다. https://jsfiddle.net/kamela101/e6ac6jb4/PSP, PDF 파일 형식의 축소판을 표시하려면 업로드 관리와 함께 imagemagick 사용
$ = 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')
);
});
});