spring mvc html5实现ajax异步上传文件

最新推荐文章于 2024-11-03 12:03:00 发布

weixin_34268753

最新推荐文章于 2024-11-03 12:03:00 发布

阅读量75

点赞数

文章标签：测试 java javascript ViewUI

原文链接：https://my.oschina.net/686991/blog/358841

版权

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

html5升起，flash退出
实现条件:支持html5的浏览器,sprinf mvc文件上传配置,commons-fileupload包和commons-io包
<script type="text/javascript">
$(function(){
    var url="/cms-web/admin/pic/addPic";
    function progressHandlingFunction(e){
        if(e.lengthComputable){
            $('progress').attr({value:e.loaded,max:e.total});
        }
    }
    $("#upload").click(function(){
        $("#attch").click();
    });
    $('#attch').change(function(){
       var formData = new FormData();
      formData.append("file",document.getElementById('imageFile').files[0]);
      formData.append("blockIndex",1);
      formData.append("blockNum",5);
      formData.append("blockSize",2000);
      formData.append("fileName","12345.zip");
      formData.append("uniqueName","1234565678.zip");
        $.ajax({
            url: url,  //server script to process data
            type: 'POST',
            xhr: function() {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            //Ajax事件
            //beforeSend: beforeSendHandler,
           // success: completeHandler,
            //error: errorHandler,
            // Form数据
            data: formData,
            //Options to tell JQuery not to process data or worry about content-type
            cache: false,
            contentType: false,
            processData: false
        });
    });
});
</script>
<title>Insert title here</title>
</head>
 <body>
 <form enctype="multipart/form-data">
    <input type="file" id="attch" name="file" style="display:none">
    <input type="button" id="upload" value="提交"/>
</form>
java
@RequestMapping(value="/addPic",method=RequestMethod.POST)
    public String addPic(@RequestParam("file") MultipartFile pic){
        System.out.println(pic.getOriginalFilename());
        return "pic/addIndexPic";
    }

转载于:https://my.oschina.net/686991/blog/358841