7.3 使用定制方式上传图片

所谓定制方式，就是设计一个图片选择框，可以使用调整大小和选择取图范围等手段设定上传的图片文件。

7.3.1 实体建模

为了演示文件上传，使用 Neo4j 数据库创建一个商品节点实体，如代码清单 7-7 所示。程序中省略了 Getter 和 Setter 方法，这些方法可以用 IDEA 编辑器自动生成，其中 picture 属性用来保存单个图片的链接地址，contents 属性用来保存在富文本编辑器中编辑的内容，其他属性如名称、简要说明、定价等结合起来主要体现一个商品的基本信息。

代码清单 7-7 商品节点实体建模

@NodeEntity
public class Goods {
    @GraphId
    private Long id;
    private String name;
    private String brief;
    private String picture;
    private String price;
    private String contents;
    @DateLong
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date create;
private Long shopid;……





}

7.3.2 上传图片

1.上传图片对话框设计

在编辑商品的过程中上传图片时，将打开一个上传图片对话框，对话框使用 JavaScript 设计，如代码清单 7-8 所示。在对话框中设计了三个按钮，分别是确定、删除和取消，其中确定按钮将调用 sureChoose 方法对图片进行裁剪，然后将上传图片的链接地址导入编辑商品的页面，由商品编辑的页面保存。“/pic/upload”是连接控制器的 URL，使用这个链接将由控制器返回对话框的上传图片页面设计“uploa-pic.html”。

代码清单 7-8 上传图片对话框设计

function picUp() {
    var picWidth = 720, picHeight = 400, callback = setImgUrl;
    var isSubmit = false;
    rt = pic.dialog.show({
        src: "/pic/upload",
        name: "_uploadPic_iframe",
        title: "上传图片




",
        width: 750,
        height: 550,
        titleLineType: 'g-topbg',
        btn: {
            yes: "确定




",
            del: "删除




",
            no: "取消




",
            no_style: 'white',
            del_style: 'orange',
            yes_before_close: function (win) {
                if (!isSubmit) {
                    isSubmit = true;
                    win.sureChoose(function (data) {
                        if (data) {
                            callback(data);
                            rt.hide();
                        } else {
                            isSubmit = false;
                        }
                    });
                }
                return false;
            },
            del_before_close: function (win) {
                win.delChoose(function (data) {
                    if (data) {
                        delImaConfirm(data);
                    }
                });
            }
        },
        load: function (win) {
            win.page.upload.init(picWidth, picHeight);
        }
    });
}

2.上传图片页面设计

代码清单 7-9 是设计上传图片页面的部分 HTML 代码，其中通过一个类型为 file 的输入文本框，从本地中选择需要上传的图片文件，然后将图片展示在编辑界面上。在编辑界面上，使用了一个图片选择框，这样，不但可以调整上传图片的宽度和高度，还可以在图片中选择特定的区域进行裁剪。

代码清单 7-9 上传图片页面设计

<div class="img-view">
    <div class="up-tit">下图为您的图片展示，请注意是否清晰。




</div>
    <div class="upload-box">
        单击上传





        <input id="pictureFile" name="pictureFile" type="file" class="file" onchange="uploadPic_submit(this)"/>
    </div>
    <div class="view-box">
        <div class="view" id="view"><img/></div>
        <input type="hidden" value="" id="p1"/><!-- 左上坐标




 -->
        <input type="hidden" value="" id="p2"/><!-- 右上坐标




 -->
        <input type="hidden" value="" id="p3"/><!-- 右下坐标




 -->
        <input type="hidden" value="" id="p4"/><!-- 左下坐标




 -->
    </div>
    <div class="file-type">支持类型：




jpg、




jpeg、




png。




<span class="error">格式不正确




</span></div>
    <div class="reupload">
        <div class="l">
            <div class="newUpDiv"><p>选择文件




</p>
                <input id="changeFile" class="g-btn g-btn-white"name="pictureFile" 
type="file" onchange="uploadPic_submit(this)"/>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

在上传图片的对话框中单击上传文件后，将调用 ajaxFileUpload 方法，如代码清单 7-10 所示。其中的链接地址“/pic/uploadPic”将调用文件上传控制器，实现文件上传功能。

代码清单 7-10 上传文件的 Ajax 方法定义

function ajaxFileUpload(id){
    var url = '/pic/uploadPic';
    $.ajaxFileUpload({
        url : url,            // 需要链接到服务器地址





        fileElementId : id,   // 文件选择框的




id 属性





        dataType : 'json',    // 服务器返回的格式，可以是




json
        success : function(data) {
            if(data.errorMsg){
                showMsg(data.errorMsg, "错误




");
            }else{
                page.upload.finish(data.pathInfo,data.width,data.height);
            }
        }
    });
}

3.上传图片控制器设计

上传图片控制器的设计，将调用 7.2.2 节定义的 FastefsClient 服务类，直接与 FastFDS 服务器打交道，如代码清单 7-11 所示。这里必须注意区别以下两种类型的文件路径：

filename：这是 FastefsClient 使用的与 FastFDS 服务器进行交互通信时使用的文件路径，它由组名、路径和文件名组成。

pathHead+filename：这是可以在浏览器的页面上使用的完整图片文件路径，pathHead 由 Tracker Server 的域名或 IP 地址及其端口组成。

将在数据库中保存 filename 和 pathHead 这两个属性，在页面视图中调用的返回参数中，使用了 pathInfo（pathHead+filename）参数返回文件的完整路径。

代码清单 7-11 上传图片控制器设计

@Value("${file.path.head:http://192.168.1.214:84/}")
private String pathHead;
@Autowired
private FastefsClient fastefsClient;
@RequestMapping(value = "/uploadPic", method = RequestMethod.POST)
    public void uploadPic(@RequestParam("pictureFile") MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response) {
        try {
            String filename = fastefsClient.uploFile(multipartFile);
            Long shopid = 1L;
            ……





            BufferedImage image = ImageIO.read(multipartFile.getInputStream());
            Map<String, Object> data = new HashMap<String, Object>();
            data.put("pathInfo", pathHead+filename);
            data.put("width", image.getWidth());
            data.put("height", image.getHeight());
            ObjectMapper mapper = new ObjectMapper();
            String ret =  mapper.writeValueAsString(data);
            response.setContentType("text/html;charset=utf8");
            response.getOutputStream().write(ret.getBytes());
            response.flushBuffer();
        }catch (IOException e){
            e.printStackTrace();
        }
    }

4.上传图片效果图

上面设计最终的运行效果如图 7-2 所示。因为使用了定制的方式，也就是使用图片选择框重新选择和调整上传的图片，所以这个过程完成后，后台会对已经上传的文件进行裁剪，裁剪后删除原来的旧文件，并保存裁剪下来的新文件。

图 7-2 使用定制方式上传图片的效果图