无法在精细上传器中查看缩略图上的图像

时间:2016-06-08 12:35:05

标签: javascript jquery fine-uploader

您好我正在使用精细上传器成功完成上传功能,但是对于编辑的新功能,我搜索了相同的插件,发现该会话可以处理此功能。

但是我没有在精细上传部分查看图像,因为下面是我得到的视图。

enter image description here

我传递name,uuid和thumbnailUrl作为回应。

编辑: 在服务器端:

 List<PropertyImageEntity> propertyImageEntity=propertyService.getImagesUrlNames(Integer.parseInt(request.getParameter("id")),Constant.PROP_VAL);
       for(PropertyImageEntity propertyImagesDetails: propertyImageEntity)
         {
            ImageDataResponse imageResponseData=new ImageDataResponse();
            imageResponseData.setName(propertyImagesDetails.getFilename());
            String test=String.valueOf(UUID.randomUUID());
            imageResponseData.setUuid(this.uuid);
            imageResponseData.setId(String.valueOf(propertyImagesDetails.getImageid()));
            imageResponseData.setSize(propertyImagesDetails.getSize());
            imageResponseData.setStatus("upload successful");
            imageResponseData.setThumbnailUrl(propertyImagesDetails.getUrl());
            imageResponse.add(imageResponseData);
         }

在客户端:

var manualUploader1 = new qq.FineUploader(
        {
            element : document
                    .getElementById('fine-uploader-manual-trigger1'),
            template : 'qq-template-manual-trigger1',
            request : {
                endpoint : '/server/uploads?${_csrf.parameterName}=${_csrf.token}&id=${id}'
            },
            thumbnails : {
                placeholders : {
                    waitingPath : '../assets/js/property/fileupload/placeholders/waiting-generic.png',
                    notAvailablePath : '../assets/js/property/fileupload/placeholders/not_available-generic.png'
                }
            },
            validation : {
                allowedExtensions : [ 'png', 'jpeg', 'jpg' , 'gif'],
                itemLimit : 6,
                sizeLimit : 100000000
            },
            autoUpload : false,
            debug : true,
            callbacks: {
                onError: function(id, name, errorReason, xhrOrXdr) {

                        $("#errorMsg4").html(errorReason);
                }
            },
            session: {
                endpoint: '/server/get?id=${id}',
                params: {},
                customHeaders: {},
                refreshOnReset: true
            },
            messages: {
                typeError: jQuery.i18n.prop("invalid.extention.error"),
                sizeError: jQuery.i18n.prop("upload.filesize.error"),
                noFilesError: jQuery.i18n.prop("nofiles.toupload.error"),
                tooManyItemsError: jQuery.i18n.prop("toomany.items.error"),
                retryFailTooManyItems: jQuery.i18n.prop("retry.fail.error")
            }
        });

qq(document.getElementById("trigger-upload1")).attach("click",
        function() {
        $("#errorMsg4").html("");
            manualUploader1.uploadStoredFiles();
        });

但是在控制台中显示200 ok的图像网址响应。

响应:

[{"name":"b.png","uuid":"e3a5581e-aee9-4b8d-813f-63e0d400c9bc","thumbnailUrl":"http://192.168.1.68/html/1465290007617b.png","id":"84","size":26507,"status"
:null}]

控制台日志:

enter image description here

1 个答案:

答案 0 :(得分:1)

通过在apache2.conf中添加cors头来解决上述问题。

Header set Access-Control-Allow-Origin "*" 

感谢@Ray在this帖子上的答案。