uploadifive上传文件

最新推荐文章于 2023-03-22 16:36:00 发布

weixin_33955681

最新推荐文章于 2023-03-22 16:36:00 发布

阅读量876

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/chaun/blog/655154

版权

为什么80%的码农都做不了架构师？>>>

1、uploadifive-demo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();

%>
<html>
<head>
    <title>uploadifive-demo</title>
    <link rel="stylesheet" type="text/css" href="jslib/uploadifive-v1.2.2-standard/uploadifive.css">
    <script src="jslib/uploadifive-v1.2.2-standard/jquery.min.js" type="text/javascript"></script>
    <script src="jslib/uploadifive-v1.2.2-standard/jquery.uploadifive.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#signup-idimage1').uploadifive({
                'auto' : true,
                'uploadScript' : '<%=path%>/userController/uploadPhoto.do',
                'fileObjName' : 'userPhoto',
                'buttonText' : '上传图片',
                'queueID' : 'tip-queue1',
                'fileType' : 'image/*',
                'multi' : false,
                'fileSizeLimit'   : 5242880,
                'uploadLimit' : 1,
                'queueSizeLimit'  : 1,
                'height' : 20,
                'width' : 70,
                'onUploadComplete' : function(file, data) {
                    var obj = JSON.parse(data);
                    if (obj.img == "500") {
                        alert("系统异常！");
                    } else {
                        $("#frontSide").val(obj.img);
                        document.getElementById("submit").disabled = false;
                    }
                },
                onCancel : function(file) {
                    $("#frontSide").val("");
                    /* 注意：取消后应重新设置uploadLimit */
                    $data = $(this).data('uploadifive'),
                            settings = $data.settings;
                    settings.uploadLimit++;
                    alert(file.name + " 已取消上传~!");
                },
                onFallback : function() {
                    alert("该浏览器无法使用!");
                },
                onUpload : function(file) {
                    document.getElementById("submit").disabled = true;//当开始上传文件，要防止上传未完成而表单被提交
                }
            });
        });
    </script>
</head>
<body>
    <h1>UploadiFive Demo</h1>

    <form class="cd-form" id="subForm" action="openaccount" method="post">
        <div id="cd-signup">
            <p class="fieldset">
                <label class="image-replace cd-photo1" for="signup-idimage1"></label>
                <input class="full-width has-padding has-border" id="signup-idimage1" type="file" name="userPhoto">
                <input type="hidden" name="frontSide" id="frontSide">
            <div id="tip-queue1"></div>
            </p>
            </p>
            <p class="fieldset">
                <input class="full-width2" id="submit" type="submit" value="提交">
            </p>
          </div>
    </form>
</body>
</html>

2、UploadController.java

/**
 * 头像上传
 * @param response
 * @param request
 * @param uploadPhoto
 * @throws IOException
 */
@RequestMapping("/uploadPhoto")
public void uploadPhoto(HttpServletResponse response,HttpServletRequest request, @RequestParam(value="userPhoto", required=false) MultipartFile userPhoto)throws IOException {
    byte[] bytes = userPhoto.getBytes();
    System.out.println(userPhoto.getOriginalFilename());
    String uploadDir = request.getRealPath("/")+"upload";
    File dirPath = new File(uploadDir);
    if (!dirPath.exists()) {
        dirPath.mkdirs();
    }
    String sep = System.getProperty("file.separator");
    File uploadedFile = new File(uploadDir + sep + userPhoto.getOriginalFilename());
    System.out.println("uploadedFile :"+uploadedFile.toString());
    FileCopyUtils.copy(bytes, uploadedFile);
    String msg = "true";
    response.getWriter().write(msg);
}

3、网上下载uploadifive-v1.2.2-standard

4、测试上传

转载于:https://my.oschina.net/chaun/blog/655154