springmvc+uploadify3.2.1完整代碼示例,java,jsp

  1. 前臺頁面: 引入js和css
<script type="text/javascript" src="${STATIC_FILE_PATH}/js/jquery/jquery-1.10.js${STATIC_FILE_VERSION}"></script> <link type="text/css" rel="stylesheet" href="${STATIC_FILE_PATH}/js/jPlug/uploadify/uploadify.css${STATIC_FILE_VERSION}"></link>

<script type="text/javascript" src="${STATIC_FILE_PATH}/js/jPlug/uploadify/jquery.uploadify.min.js${STATIC_FILE_VERSION}"></script>: javascript

2:腳本內容: css

以下參數你還沒搞懂的話 ,請查閱官方文檔,地址:http://www.uploadify.com/documentation/ html

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : '${STATIC_FILE_PATH}/js/jPlug/uploadify/uploadify.swf',
            'uploader' : '${CONTEXT_PATH}/shop/upload.html',
            'height': 25,
            'whith' :120,
            'auto'  : false,
            'fileDataName':'file',
            'buttonText' : '選擇圖片...',
            'fileTypeExts' : '*.gif; *.jpg; *.png',
            'multi'    : false,
            'method'   :'post',
            'debug':true,
            'onUploadStart' : function(file) {
                var param = {};
                param.picHref = $('#file_upload_href').val();
                     $("#file_upload").uploadify("settings", "formData", param);
                },
            'onUploadSuccess' : function(file, data, response) {
                var imgUrl = uploadCommon.getPath(data);
                $("#imgUrl").val(imgUrl);// 返回的圖片路徑保存起來
                $("#thumbImg").attr("src", IMAGE_FILE_PATH + imgUrl);// 更新logo顯示
                /*uploadCommon.uploadImageBtnStyle("imgUrl");
                uploadCommon.initPreviewAfterUpload(data); // 新圖片預覽*/            
            },
            'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
               }

        });
    });
});
</script>
java

2:<body>內容: jquery

<body >
          <input id="file_upload" type="file" name="file"/>
           <a href="javascript:$('#file_upload').uploadify('upload', '*')">上傳文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">中止上傳!</a>  
</body>
app

3:後臺controller: dom

@RequestMapping(value = "/shop/upload",method=RequestMethod.POST)
    @ResponseBody
    public Object uploadHandlerForUploadify(String picHref,HttpServletRequest request)
            throws Exception {
        Integer userID = 0;
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile multipartFile = multipartRequest.getFile("Filedata");
        /** 寫文件前先讀出圖片原始高寬 **/
        byte[] bytes = multipartFile.getBytes();
        InputStream is = new ByteArrayInputStream(bytes);
        int width = 0; // 原始圖片寬
        int height = 0; // 原始圖片高
        try {
            BufferedImage bufimg = ImageIO.read(is);
            // 只有圖片才獲取高寬
            if (bufimg != null) {
                width = bufimg.getWidth();
                height = bufimg.getHeight();
            }
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
            loger.error(e.getMessage());
            is.close();
            throw new Exception("uploadify上傳圖片讀取圖片高寬時發生異常!");
        }

        /** 拼成完整的文件保存路徑加文件 **/
        String originalFilename = multipartFile.getOriginalFilename(); // 文件全名
        String suffix = StringUtil.substringAfter(originalFilename, "."); // 後綴
        // 文件名轉碼
        // fileName = Base64.StringToBase64(fileName);
        // fileName = StringUtil.join(fileName, suffix);
        UploadFilePathVO uploadFile = UploadFilePathUtil.initFileUpload(userID, "test", suffix, width, height);
        File file = new File(uploadFile.getRealPath());
        multipartFile.transferTo(file); 工具

    return uploadFile;
    } post


4:自定義的上傳路徑工具類: spa

/**
     * 獲取圖片上傳路徑(處理高寬)
     *
     * @return
     */
    public static UploadFilePathVO initFileUpload(Integer userID, String imageType, String suffix, int width, int height) {
        String randomKey = RandomUtil.getRandomString(6);
        Date date = new Date();
        String dateStr = new SimpleDateFormat("yyyyMMdd").format(date);
        String timeStr = new SimpleDateFormat("HHmmssSSS").format(date);
        int hashcode = Math.abs(userID.hashCode() % 256);

        String relativePath = StringUtil.join(imageType, "/", hashcode, "/", userID, "/", dateStr, "/");
        String realPath = StringUtil.join(Constants.UPLOAD_REALPATH, "/", relativePath);

        File logoSaveFile = new File(realPath);
        if (!logoSaveFile.exists()) {
            logoSaveFile.mkdirs();
        }
        // 圖片文件名: 時間戳 + 隨機串 + 高寬
        String fileName = StringUtil.join(timeStr, randomKey, '_', height, '_', width, '.', suffix);
        UploadFilePathVO uploadFile = new UploadFilePathVO();
        uploadFile.setRelativePath(StringUtil.join(relativePath, fileName));
        uploadFile.setRealPath(StringUtil.join(realPath, fileName));
        return uploadFile;
    }


5:UploadFilePathVO類:

    public String realPath;     public String relativePath;     private int imgHeight; // 上傳圖片的高     private int imgWidth; // 寬

相關文章
相關標籤/搜索