文件上传完整实例(限制格式、大小)

先给出代码,后面统一介绍需要引入的js和jar文件,如果有什么问题+QQ“3393055725”
1、HTML代码:

<div id="con">
    <img src="${model.filePath}">
</div>
<input type="file" id="fileUpload" value="上传文件">
<input type="hidden" id="filePath" name="filePaht" value="${model.filePath}">

2、js代码:很好用的一个插件

$(function(){
    new AjaxUpload('fileUpload',{
            action:'...',//后台处理逻辑的URL
            name:'fileName',
            autoSubmit:'true',
            data:{'filePath':$("#filePaht").val()},
            responseType:'json',
            accept:'image/jpeg,image/png',//只支持两种图片格式,如果写上这个属性,在浏览文件的时候只能选择指定格式的文件,也可以在下面的onSubmit方法中对格式进行限制
            onChange:function(file, extension){
                //这里处理当文件发生更改时候的操作,一般是将原文件删除,也可以不作处理,在最后直接进行更新操作就行
                //如果要做处理的话,使用ajax
                var filePath = $("#filePath").val();
                $.ajax({
                    type:'post',
                    url:'...',
                    data:{'filePath':filePath},
                    dataType:'json',
                    success:function(data){
                        if(data){
                            alert("...")
                        }
                    }
                });
                //onChange这部分一般都不需要实现
            },
            onSubmit:function(file, extension){
                //如果前面写了accept参数,onSubmit方法可以不需要实现
                if (!(extension && /^(jpg|jpeg|png)/.test(extension))) {//通过正则表达式进行验证
                    alert("文件格式不正确");
                    return false;
                }
            },
            //下面这个方法通常都要实现的
            onComplete:function(file, response){
                //这个方法主要是用来拼接前台dom元素,比如img标签的src属性值
                var divCon = '<img src="' + response.fileUrl + '">';
                $("#con").html(divCon);
                //根据业务需求对dom元素进行更多的操作

            },
        }
    );
});

3、后台代码:

private Logger logger = LoggerFactory.getLogger(getClass());
private FastdfsClientFactory fastdfsClientFactory;
private String fileServerUrl = "http://--.---.-.--:----/";//服务器地址,一般都是通过读取配置文件的方式获取的,这个根据不同的框架使用不同的方式
@RequestMapping("/upload")
@ResponseBody
public FileResult fileUpload(RequestParam("fileName")MultipartFile file) {
    FileResult fileResult = new FileResult();
    try{
        String tempFileName = file.getOriginalFilename();//文件名
        String fileExtName = tempFileName.substring(tempFileName.lastIndexOf(".") + 1);//文件扩展名
        //判断文件大小
        if (file.getBytes().length > 1024L * 1024 * 2) {//2M
            fileResult.setResultMsg("文件不能超过2M");
            return fileResult;
        }
        //上传文件
        InputStream inputStream = file.getInputStream();
        Result<String> result = this.fastdfsClientFactory.getFastdfsClient().upload("",inputStream,file.getSize(),fileExtName,null);
        if (result.isSuccess()) {
            fileResult.setFileName(tempFileName);
            fileResult.setFileUrl(fileServerUrl + result.getData());
        } else {
            fileResult.setResultMsg("上传失败");
        }
    }catch(Exception e){
        logger.error("上传失败" + e);
        fileResult.setResultMsg(e.getMessage());
    }
    return fileResult;
}
public class FileResult {
    private String fileName;
    private String fileUrl;
    private String resultMsg;
    /**
    * getter和setter方法
    */
}

4、js和jar文件的引入:
ajaxupload.js文件
fdfsclient-0.0.1.jar文件
slf4j-api-1.7.21.jar文件

资源下载地址:http://download.csdn.net/download/cat_pp/9890867
木有积分的亲们+QQ“3393055725”分享给大家,也可以讨论其他的技术问题

5、扩展内容:
5.1 删除文件方法:

@RequestMapping("/delete")
@ResponseBody
public FileResult fileDelete(String fileId) {
    FileResult fileResult = new FileResult();
    try{
        //如果传参是fileURL,可以使用下面的方法获取fileId
        //String fileId = fileUrl.split(fileServerUrl)[1];
        Result<Boolean> result = this.fastdfsClientFactory.delete(fileId);
        fileResult.setResultMsg("删除成功");
    }catch(Exception e) {
        logger.error("删除失败" + e);
        fileResult.setResultMsg(e.getMessage());
    }
    return fileResult;
}

5.2 KindEditor文件上传

@RequestMapping("/keUpload")
@ResponseBody
public Map keUpload(@RequestParam("fileName") MultipartFile file) {
    Map<String, Object> map = new HashMap<>();
    try{
        String tempFileName = file.getOriginalFilename();
        String fileExtName = tempFileName.substring(tempFileName.lastIndexOf(".") + 1);
        InputStream inputStream = file.getInputStream();
        Result<String> result = this.fastdfsClientFactory.upload("",inputStream,file.getSize(),fileExtName,null);
        map.put("message", "上传成功");
        map.put("error", 0);
        map.put("url", fileServerUrl + result.getData());
    }catch(Exception e) {
        map.put("message", "上传失败");
        map.put("error", 1);
    }
    return map;
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值