图片的上传(多张图片的上传)

时间:2021-08-23 13:18:10

页面展示:点击链接查看图片(用到了jstl插件)

图片的上传(多张图片的上传)

jsp页面:
<LINK href="${basePath}plugins/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
    //防止客户端缓存文件,造成uploadify.js不更新,而引起的“喔唷,崩溃啦”  
    document.write ("<script type='text/javascript' " + "src='${basePath}plugins/uploadify/jquery.uploadify.min.js?" + new Date () + "'><\/script>");
</script>
<style>
.uploadify-box {
    width: 130px;
    margin: 0px;
    margin-top: 10px;
}
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<script type="text/javascript">
$(function() {
    //图片上传
    $('.uploadImage').each(function(){
        var id=    $(this).attr("id");
        var $this = $(this);
        $("#"+id).uploadify({
            fileSizeLimit : '1024KB',
            uploader : '${basePath}/core/upload!uploadImage.action', // 服务器端处理地址  
            swf : '${basePath}js/uploadify/uploadify.swf', // 上传使用的 Flash  
            buttonText : "上传图片",
            buttonCursor : 'hand',
            fileObjName : 'uploadify',// 上传参数名称 后台action里面的属性uploadify  
            fileTypeExts : "*.jpg;*.png;*.gif", // 扩展名  
            fileTypeDesc : "请选择 jpg png gif 文件",
            removeTimeout : 1, // 文件说明  
            auto : true, // 选择之后,自动开始上传  
            multi : true, // 是否支持同时上传多个文件  
            queueSizeLimit : 10, // 允许多文件上传的时候,同时上传文件的个数
            queueID : 'show_queueID',
            
            onUploadSuccess : function(file,data, response) {
                var data = jQuery.parseJSON(data);                
                if(data.error == 1){
                    ldDialog.alert(data.message);
                }else{    
                    //地址赋值
                    var fname=data.fileName;
                    var pth=data.url;
                    var ul=$("#workSecurityCheck\\.checkPhoto").val();
                    $("#workSecurityCheck\\.checkPhoto").val(ul+fname+";"+pth+"|");
                    //图片显示
                    var htmlString ="<a target='_blank' href='${basePath}/"+data.url+"' style='color: #ff7800;padding-right:20px;'>"+fname+"</a>"; 
                    $("#workSecurityCheck\\.checkPhoto").after(htmlString);
                }
            }
        });
    });
    
    
});
</script>
<tr>
    <td width="20%" class="right yhItem1">
         <span class="font12">*</span>照片:
     </td>
     <td>
     <c:if test="${readOnly == null }">
           <input type="button" id="uploadImage" class="uploadImage" name="button" ${readOnly} value="上传图片"/>
     </c:if>
     </td>
</tr>
<tr>
    <td width="20%" class="right yhItem1"></td>
     <td>
          <div id="deleteID">
            <c:if test="${not empty workSecurityCheck.checkPhoto}">
            <c:forEach items="${fn:split(workSecurityCheck.checkPhoto,'|')}" var="val" >
             <a target='_blank' href="${basePath}/${fn:substring(val, fn:indexOf(val, ';')+1 , fn:length(val))}" style="color: #ff7800;padding-right:20px;">${fn:substring(val, 0, fn:indexOf(val, ';') )}</a>
             </c:forEach>
            </c:if>
          </div>
         <input name="workSecurityCheck.checkPhoto" type="hidden" class="input138 ldText"
          id="workSecurityCheck.checkPhoto" value="${workSecurityCheck.checkPhoto}" />
    </td>
</tr>

java :
    
    @RequestMapping("core/upload!uploadImage.action")
    public void uploadImage(@RequestParam(value = "uploadify", required = false) MultipartFile uploadify,HttpServletResponse response,ModelMap modelMap)throws Exception {
        String savePath = getRequest().getServletContext().getRealPath("/")+ "/" + "upload/";
        String saveUrl = "upload/";
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");
        extMap.put("csv", "csv");
        
        //获取系统定义的上传最大限值
        Integer uploadMaxSize =Integer.valueOf(optionService.getByOptionName(CoreValue.OPTION_UPLOAD_MAX_SIZE).getOptionValue());
        long maxSize = Long.valueOf(String.valueOf(uploadMaxSize)).longValue();
        String maxSizeKb = StringUtil.formatNumber(new Double(maxSize / 1024L),"0");
        response.setContentType("text/html; charset=UTF-8");
        String jsonString ="";
        
        if (uploadify==null || uploadify.isEmpty()) {
            jsonString = getError("请选择文件。");
            response.getWriter().println(jsonString);
            return;
        }

        File uploadDir = new File(savePath);
        if (!uploadDir.isDirectory()) {
            jsonString = getError(savePath + "上传目录不存在。");
            response.getWriter().println(jsonString);
            return;
        }

        if (!uploadDir.canWrite()) {
            jsonString = getError("上传目录没有写权限。");
            response.getWriter().println(jsonString);
            return;
        }

        String dirName = getRequest().getParameter("dir");
        if (dirName == null) {
            dirName = "image";
        }
        if (!extMap.containsKey(dirName)) {
            jsonString = getError("目录名不正确。");
            response.getWriter().println(jsonString);
            return;
        }

        savePath = savePath + dirName + "/";
        saveUrl = saveUrl + dirName + "/";
        File saveDirFile = new File(savePath);
        if (!saveDirFile.exists()) {
            saveDirFile.mkdirs();
        }
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");
        String ymd = sdf.format(new Date());
        savePath = savePath + ymd + "/";
        saveUrl = saveUrl + ymd + "/";
        File dirFile = new File(savePath);
        if (!dirFile.exists()) {
            dirFile.mkdirs();
        }

        String fileName = uploadify.getOriginalFilename();
        long fileSize = uploadify.getSize();
        if (fileSize > maxSize) {
            jsonString = getError("上传文件大小超过限制。最大为" + maxSizeKb + "kb");
            response.getWriter().println(jsonString);
            return;
        }

        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
            
        if (!Arrays.asList(((String) extMap.get(dirName)).split(",")).contains(fileExt)) {
            jsonString = getError("不允许的上传文件类型。");
            response.getWriter().println(jsonString);
            return;
        }

        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        String newFileName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;
        File uploadedFile = null;
        try {
            uploadedFile = new File(savePath, newFileName);
            if(uploadedFile.exists()){
                
            }
            if(!uploadedFile.exists()){
                uploadedFile.mkdirs();
            }
            uploadify.transferTo(uploadedFile);
        } catch (Exception e) {
            jsonString = getError("上传文件失败。");
            response.getWriter().println(jsonString);
            return;
        }
        JSONObject obj = new JSONObject();
        obj.put("error", Integer.valueOf(0));
        obj.put("url", saveUrl + newFileName);
        obj.put("fileName", fileName);
        jsonString = obj.toJSONString();

        modelMap.put("fileName", fileName);
        modelMap.put("newFileName", newFileName);
        modelMap.put("url", saveUrl + newFileName);
        response.getWriter().println(jsonString);
        return;
    }

 

    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", Integer.valueOf(1));
        obj.put("message", message);
        return obj.toJSONString();
    }