文件上传

效果就是，实现我们上传按钮样式是我们自己设计的，在上传成功后在<input text>里显示我们成功上传的文件名称。

<div class="og_upload">
    <a href="javascript:;" class="file" id="choosePhoto">上传/修改
    </a>
    <input type="file" id="organPhoto" name="organPhoto"  onchange="LegalAccount.fileUpLoad(this)" style="display: none;"/>
    <input type="text" id="organPhotoText" class="height-24 width-300 fl import_src" readonly="readonly">
</div>

实现代码：

引入上传插件

<script src='${requestContext.contextPath}/resources/ace/assets/js/ajaxfileupload.js'></script>

1、首先触发点击事件

$("#choosePhoto").click(function(){
    $("#organPhoto").click();
});

2、选择文件，点击确定后实现上传，格式校验以及大小校验。

fileUpLoad : function (fileInputObj) {
    var allowExtention = ".jpg,.jpeg,.gif,.png";
    var extention = fileInputObj.value.substring(fileInputObj.value.lastIndexOf(".")+1).toLowerCase();
    var files = fileInputObj.files;
    var fileSize = files[0].size;
    if(fileSize<=2097152) {
        if (allowExtention.indexOf(extention) > -1) {
            var $fileInputObj = $(fileInputObj);
            var fileName = $fileInputObj.val();//文件名
var fileInputId = $fileInputObj.attr('id');//文件ID
var fileTextId = fileInputId + 'Text';//文件选择框的ID
            //获取文件名称
fileName = fileName.split("\\");
            fileName = fileName[fileName.length - 1];
            jQuery.ajaxSettings.traditional = true;
            //真正的上传文件操作
$.ajaxFileUpload({
                url: ctx + '/management/event/uploadd',
                secureuri: false,//安全协议
fileElementId: 'organPhoto',//id
type: 'POST',
                dataType: 'json',
                async: false,
                error: function (data, status, e) {
                    alert('Operate Failed!' + e);
                },
                success: function (json) {
                    debugger;
                    if (json.retCode >= 0) {
                        $('#' + fileTextId).val(fileName);
                        $('#' + fileTextId).attr("attachId", json.retCode);
                    } else {
                        alert('上传失败' + json.retMsg);
                    }
                }
            });
        } else {
            alert("仅支持" + allowExtention + "为后缀名的文件！");
        }
    }else{
        alert("大小不大于2MB！");
    }
}

3、后台接收交互

@ResponseBody
    @RequestMapping(value = "/upload")
    public void fileUpload(HttpServletRequest request,HttpServletResponse response) throws IOException {
        response.setContentType("text/html;charset=UTF-8");//输出的响应头设置
XResult xResult=new XResult();
        xResult.setRetCode(-1);
        xResult.setRetMsg("上传文件失败");

        //从配置表中获取附件上传保存的跟路径,如果没有配置则给出默认值
String attach_rootpath= CacheUtil.getV(GovnetConstant.CFG_APPNAME,GovnetConstant.ATTACH_ROOTPATH);// D:\\attach\\
if(StringUtils.isBlank(attach_rootpath)){
            attach_rootpath="D:/attach/";
        }else{
            attach_rootpath=attach_rootpath.replace("\\\\","/");
        }
        //动态生成规范目录yyyy/YY/mm/dd/yyyymmddhhmmss[sequence]filename
Date date=new Date();
        String dateStr= DateUtil.dateToString(date, DateStyleEnum.YYYY_MM_DD);
        String fileNamePrefix=StringUtils.defaultIfBlank(DateUtil.dateToString(date, DateStyleEnum.YYYYMMDDHHMMSS),"");
        if(dateStr==null){
            log.warn("创建附件目录失败...");
            dateStr="temp";
        }else{
            dateStr=dateStr.replace("-","/");
        }
        //最终附件存放的目录
attach_rootpath=attach_rootpath+dateStr+"/";

        //如果是windwos系统，调整路径格式为windwos风格，“\”
if("\\".equals(System.getProperty("file.separator"))){
            attach_rootpath=attach_rootpath.replace("/","\\");
        }

        //创建附件目录
File file = new File(attach_rootpath);
        if (!file.exists()) {
            file.mkdirs();
        }

        //获取上传的文件list,循环上传到附件目录中
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        String fileName = null;
        String fileFullName=null;
        Integer attachId=null;
        int i = 1;
        if(fileMap!=null&&!fileMap.isEmpty()){
            for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
                attachId= GernerateUtil.gernerateId();
                fileNamePrefix+=attachId.toString();
                MultipartFile mf = entity.getValue();
                fileName = mf.getOriginalFilename();
                String suffix = fileName.substring(fileName.lastIndexOf("."));
                fileFullName=attach_rootpath + fileNamePrefix + String.valueOf(i) + suffix;
                i++;
                File uploadFile = new File(fileFullName);
                try{
                    FileCopyUtils.copy(mf.getBytes(), uploadFile);
                }
                catch(IOException e){
                    log.error(e);
                    response.getWriter().print("{\"retCode\":-1,\"retMsg\":\"上传文件失败\"}");
                    //return xResult;
return;
                }

                //调用归档方法：文件名：fileName 文件路径：attach_rootpath + fileName
User user=(User) SessionUtil.get(request,SessionUtil.USER_SESSION_NAME);
                Attach attach=new Attach();
                attach.setAttachid(attachId);
                attach.setAttachname(fileName);
                fileFullName=fileFullName.replace("\\","/");
                attach.setAttachpath(fileFullName);
                attach.setInsman(user.getUsername());
                attachService.insert(attach);
            }
            String sysPath = request.getContextPath()+"/resources"+fileFullName.substring(fileFullName.lastIndexOf(":")+1);
            xResult.setRetPath(sysPath);
            xResult.setRetCode(attachId);
            xResult.setRetMsg("上传文件成功");
            response.getWriter().print("{\"retCode\":"+attachId+",\"retMsg\":\"上传文件成功\",\"retPath\":\""+sysPath+"\"}");
            return;
        }
//        JSONObject jsonObject = JSONObject.fromObject(xResult);
//        System.out.println(jsonObject.toString());
//        return xResult;
}

来自为知笔记(Wiz)