首页 > 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小

前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小

以下是相关代码,现在就是上传上去想让显示以下分辨率,也就是图片的大小,请问应该怎么该才可以,求解答

前台上传文件代码

window.onload=function(){
    var type=document.getElementById('hidType').value;
    var obj = document.getElementsByName('USER_TYPE');
    for(var i=0;i<obj.length;i++){
        if(type==obj[i].value){
            obj[i].checked=true;
        }
    }
    
    $("#file_upload").uploadify({
        'swf': "/uploadify/uploadify.swf",
        'fileObjName': 'file',
        'uploader': "/uploadlist.do?action=uploadify",
        //'uploader': "http://10.21.67.16:8080/file/upload/savefile.shtml",
        'auto': true,
        'removeTimeout': 0,
        'width': 180,
        'height': 30,
        'buttonClass':'btn btn-primary',
        'multi': false,
        'uploadLimit': 9,
        'fileSizeLimit': "5MB",
        'fileTypeDesc': '图片文件(*.jpg;*.png;*.gif;*.jpeg)',
        'buttonText': '添加图片',
        'fileTypeExts': "*.jpg;*.png;*.gif;*.jpeg",
        'progressData': 'percentage',
        'speed': 'percentage',
        'queueSizeLimit': 1,
        'removeCompleted': true,
        'onSelect': function(file) {
            this.queueData.filesErrored = 0;
        },
        'onOpen': function(event, ID, fileObj) {},
        'onSelectError': function(file, errorCode, errorMsg) {
            /* for (var i = 0; i < errorCodes.length; i++) {
                if (errorCodes[i] == errorCode) {
                    this.queueData.errorMsg = errorMsgs[i];
                }
            } */
        },
        'onFallback': function() {
            alert("浏览器不能兼容Flash,请下载最新版!");
        },
        'onUploadSuccess': function(file, data, response) {
            var dataObj = $.parseJSON(data);
            if (dataObj.status) {
                $("#circle_image").show();
                $('#show_image').append('<div style="position:relative;width:200px;float:left;margin-right:15px;"><div class="delete">x</div><input type="hidden" name="CIRCLE_IMAGE" value="'+dataObj.path+'"/><input type="hidden" name="CIRCLE_THUMB_PATH" value="'+dataObj.thumbPath+'"/><img style="padding: 5px 5px;" width="200px" height="200px" src="' + dataObj.path + '" /></div>');
                $(".delete").off('click');
                $(".delete").on("click",function(){
                    $(this).parent().remove();
                });
                var num = $("input[name='CIRCLE_IMAGE']").length;
                if(num > 8){
                    $('#file_upload').uploadify('disable', true);
                }
            } else {
                 alert(dataObj.message);
            }
        },
        'onUploadError': function(file, errorCode, errorMsg, errorString) {
            
        }
    });
} 

后台处理代码

public void uploadify(HttpServletRequest request, HttpServletResponse response) {
        
        response.setContentType("text/plain; charset=GBK");
        response.setHeader("Pragma", "No-cache"); // 设置页面不缓存
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        
        PrintWriter out=null;

        Map<String, String> jsonMap = new HashMap<String, String>();

        String path = "";// 图片
        String thumbPath = "";//缩略图片
        // 2.为该请求创建一个句柄,通过它来解析请求。执行解析后,所有的表单项目都保存在一个List中。
        DiskFileUpload upload = new DiskFileUpload();
        // 通过句柄解析请求,解析得到的项目保存在一个List中
        List items;
        try {
            items = upload.parseRequest(request);
            // 3.通过循环依次获得List里面的文件项目。要区分表示
            // 文件的项目和普通的表单输入项目,使用isFormField()
            // 方法。根据处理请求的要求,我们可以保存上载的文
            // 件,或者一个字节一个字节地处理文件内容,或者打开文件的输入流。
            Iterator itr = null;

            FileItem item = null;
            String strRealPath = request.getSession().getServletContext()
                    .getRealPath("/");
            String dirTemp = strRealPath + "upfile";// 临时目录
            String uploadFolder = PubFunction.getYearMonth();
            String savePath = strRealPath + "/upfile/jxq/circle" + File.separator
                    + uploadFolder + File.separator;// 保存图片文件路径
            PubFunction.Mkdir(dirTemp);
            PubFunction.Mkdir(savePath);
            itr = items.iterator();
            while (itr.hasNext()) {
                item = (FileItem) itr.next();
                // 检查当前的项目是普通的表单元素,还是一个上载的文件
                if (item.isFormField()) {// 表单元素

                } else {// 是一个上载的文件
                    // 设置允许上传的最大值5M
                    upload.setSizeMax(5 * 1024 * 1024);
                    // 设置缓冲区大小,这里是4kb
                    upload.setSizeThreshold(6 * 1024);
                    // 设置临时目录:
                    upload.setRepositoryPath(dirTemp);
                    String strFileName = item.getName();
                    
                    String extName = strFileName.substring(strFileName
                            .lastIndexOf(".") + 1);
                    if (item.getSize() > 5 * 1024 * 1024) {
                        jsonMap.put("status", "0");
                        jsonMap.put("message", "请不要上传超过5M大小的图片!");
                    }
//                    strFileName = this.getFileName(extName, String.valueOf(user
//                            .getId()));
                    
                    strFileName = this.getFileName(extName, "_original");
                    String thumbFileName = this.getFileName(extName, "_thumb");
                    
                    try {
                        item.write(new File(savePath + strFileName));
                        //生成缩略图片
                        ImageUtilsDemo.ThumbnailsScale(savePath + strFileName,savePath + thumbFileName, 160, 160,false,"jpg"); 
                        path = "/upfile/jxq/circle/" + uploadFolder + "/" + strFileName;// 图片路径信息(相对路径)
                        thumbPath = "/upfile/jxq/circle/" + uploadFolder + "/" + thumbFileName;
                        jsonMap.put("status", "1");
                        jsonMap.put("path", PICTURE_SYS_PATH+path);
                        jsonMap.put("thumbPath", PICTURE_SYS_PATH+thumbPath);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                        jsonMap.put("status", "0");
                        jsonMap.put("message", "上传图片失败");
                    }
                }
            }
        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            jsonMap.put("status", "0");
            jsonMap.put("message", "上传图片失败");
        }
        
        try {
            out = response.getWriter();
            out.print(gson.toJson(jsonMap));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            if (out != null)
                out.close();
        }
            
    }

js就能获取图片分辨率了。。不然后端返回也可以。


查一下你用的flash插件的文档吧,通常上传之前就可以知道图片的分辨率的。

【热门文章】
【热门文章】