图片上传的第二种形式

之前有说了一种以base64的图片上传形式，这次来说说另外一种，其实很简单，很早以前都是在form提交的时候再controller中处理，现在基本不会这么做，都是通过ajax来实现异步上传的

首先需要引入jquery.ui.widget.js以及jquery.fileupload.js这两个js，

HTML代码：

<div>

    <input id="idcardImagePositiveFileUpload" type="file" name="idcardImagePositiveFileUpload" data-url="<%=request.getContextPath() %>/file/upload.action" accept=".png,.jpeg,.jpg"/>
                                                    
    <div id="idcardImagePositiveContent"></div>
                                                    
</div>

构建js对象并且初始化：

$('#idcardImageNegativeUpload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                console.log(data);  
                
                if (data.result.status != "200") {
                    alert("图片大小不能超过2M...");
                } else {
                    $.each(data.result.data, function (index, file) {
                      $("#idcardImageNegativeContent").html("<a href='" + file.url + "' target='_blank'><img src='" + file.url + "' width='120'></img></a>");
                      $("#idcardImageNegative").attr("value", file.urlDB);
                  }); 
                }
            },
        
            change: function (e, data) {
                var size = data.files[0].size;
            
                if((size / 1024 / 1024) > 2) {
                    alert("图片大小不能超过2M...");
                    return false;
                }
               }
        });

后台controller以及service处理，需要调用fastdfs客户端上传

@RequestMapping(value="/upload", method = RequestMethod.POST)
    @ResponseBody
    public LeeJSONResult upload(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception {

        List<PictureResult> picList = new ArrayList<PictureResult>();
        
        Iterator<String> itr = request.getFileNames();
        MultipartFile mpf = null;
        while (itr.hasNext()) {
            mpf = request.getFile(itr.next());
            PictureResult pic = pictureService.uploadPic(mpf);
            picList.add(pic);
        }
        
        return LeeJSONResult.ok(picList);
    }

@Override
    public PictureResult uploadPic(MultipartFile picFile) {
        PictureResult result = new PictureResult();
        // 判断图片是否为空
        if (picFile.isEmpty()) {
            result.setError(YesOrNo.YES.value);
            result.setMessage("图片为空");
            return result;
        }
        // 上传到图片服务器
        try {
            // 取图片扩展名
            String originalFilename = picFile.getOriginalFilename();
            // 取扩展名不要“.”
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            FastDFSClient client = new FastDFSClient("classpath:resource/client.conf");
            String url = client.uploadFile(picFile.getBytes(), extName);
            // 把url响应给客户端
            result.setError(YesOrNo.NO.value);
            result.setUrlDB(url);
            result.setUrl(IMAGE_SERVER_BASE_URL + url);
        } catch (Exception e) {
            e.printStackTrace();
            result.setError(YesOrNo.YES.value);
            result.setMessage("图片上传失败");
        }
        return result;
    }

上传的效果如此，最后通过上传后的路径，直接使用form序列化再提交保存到数据库中即可

image

最近实在很忙，时间很碎片化，一方面公司的产品急着做，另一方面又在做自己的产品以及一套开源权限，同时又在着手准备开公司的事情，所以在文章更新的频率上放缓了脚步，希望大家谅解，等事情告一段落后给大家每人发个红包（限公众号粉丝）哈~！

尚自习 | 程序员的进阶平台 itzixi.com

微信公众号：BeJavaGod

Java技术交流群