ajax上传头像

最新推荐文章于 2022-08-03 10:54:15 发布

小tu豆

最新推荐文章于 2022-08-03 10:54:15 发布

阅读量759

点赞数 1

本文链接：https://blog.csdn.net/cmj962464/article/details/83650442

版权

依赖jar

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>

<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>

配置文件


<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
    
    <property name="maxInMemorySize" value="40960"/>
</bean>

页面

<input type="file" name="file" id="iconPic" οnchange="getImageFun()">

//上传头像
   function getImageFun(){
       //创建FormData对象，异步实现上传文件
       var formData = new FormData();
       //获取上传文件
       var file = document.getElementById("iconPic").files[0];
       formData.append("file",file);
       $.ajax({
           url:"${pageContext.request.contextPath}/user/doUpload.do",
           data:formData,
           type:"post",
           dataType:"json",
           contentType:false,
           processData:false,
           success:function(obj){
               alert(obj.message);
               //创建本地上传文件的路径
               var url = window.URL.createObjectURL(file);
               icon.src = url;
           }
       });
   }

后台接受

//实现图片上传
@RequestMapping("/doUpload")
@ResponseBody
public String doUpload(@RequestParam("file") MultipartFile file,HttpSession session) throws IllegalStateException, IOException{
    UserMsg user=(UserMsg) session.getAttribute("user");
    //2.上传图片
    //获取服务器的真实路径
    String path =
            session.getServletContext().getRealPath("/");
    System.out.println(path);
    file.transferTo(
            new File(
                    path,"/upload/"+file.getOriginalFilename()));

    System.out.println(file.getOriginalFilename());

    HashMap map=new HashMap();
    map.put("AvatarUrl","/upload/"+file.getOriginalFilename());
    map.put("UserId",user.getUserid());
    boolean flag=userMsgService.updateUserAvatarUrl(map);
    if(flag){
        HashMap map2=new HashMap();
        map2.put("Mobile",user.getMobile());
        UserMsg user2=userMsgService.getUserByInviteCode(map2);
        session.setAttribute("user",user2);
        return JSONObject.toJSONString("成功");
    }
    return JSONObject.toJSONString("失败");
}

多文件上传图片

   /**
     * 保存文件的目录，放在web目录、或一个指定的绝对目录下
     */
    private static final String SAVEDIR = "static/upload/";








    @RequestMapping(value = "/regCarer", method = RequestMethod.POST)
    @ResponseBody
    public Object regCarer(HttpServletRequest request) {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 获得文件：
        List<MultipartFile> fileIdCard = multipartRequest.getFiles("file");
        // 注意名称不能相同
        List<MultipartFile> fileIdCard2 = multipartRequest.getFiles("file2");

        if (fileIdCard.isEmpty()) {

//            rr.setState(0);
//            rr.setMessage("身份证照片不能为空");
//            return rr;
        }
        List<List<MultipartFile>> list=new ArrayList<List<MultipartFile>>();
        // 这里做
        list.add(fileIdCard);
        list.add(fileIdCard2);
        String url="";
        MakeOrderNum data=new MakeOrderNum();
        String simple=data.makeOrderNum();
        for(int i=0;i<list.size();i++){
            String url1=this.uploadImg(list.get(i),simple,request);
            url+=url1+",";
        }

        System.out.println("URL==============="+url);



        return "";
    }




    public String uploadImg( List<MultipartFile> files,String time,HttpServletRequest request){
        String filePath2="";
        for (MultipartFile file : files) {

            String fileName = file.getOriginalFilename();
            int size = (int) file.getSize();
          
            if (file.isEmpty()) {
                return "false";
            } else {
              
                filePath2 = request.getSession().getServletContext().getRealPath("/")+SAVEDIR+time+".jpg";
                try {
                    file.transferTo(new File(filePath2));
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    return "false";
                }
            }
        }
        return filePath2;
    }

插件的使用-可以忽略下面的。

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<form class="avatar-form">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<label for="avatarInput" style="line-height: 35px;">图片上传</label>
<button class="btn btn-info" type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
<span id="avatar-name"></span>
<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg" id="imageHead"></div>

</div>
</div>
<div class="row avatar-btns">
<div class="col-md-4">
<div class="btn-group">
<button class="btn btn-info fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
</div>
<div class="btn-group">
<button class="btn btn-info fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
</div>
</div>
<div class="col-md-5" style="text-align: right;">
<button class="btn btn-info fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")">
</span>
</button>
<button type="button" class="btn btn-info fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)">

</span>
</button>
<button type="button" class="btn btn-info fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)">

</span>
</button>
<button type="button" class="btn btn-info fa fa-refresh" data-method="reset" title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214">
</button>
</div>
<div class="col-md-3">
<button id="button_save" class="btn btn-info btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

//做个下简易的验证大小格式
$('#avatarInput').on('change', function(e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;
if(Size > filemaxsize) {
alert('图片过大，请重新选择!');
$(".avatar-wrapper").childre().remove;
return false;
}
if(!this.files[0].type.match(/image.*/)) {
alert('请选择正确的图片!')
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
}

});

$(".avatar-save").on("click", function() {
var img_lg = document.getElementById('imageHead');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/png");
var newImg = document.createElement("img");
newImg.src = dataUrl;
imagesAjax(dataUrl)
}
});
})
function imagesAjax(src) {
var data = {};
data.img = src;
$.ajax({
url: "",
data: data,
type: "POST",
dataType: 'json',
success: function(re) {
   if (re) {
   if(re.status == 200) {
   $('#icon').attr('src',re.data.url );
   $('#iconPic').val(re.data.url);
   }else {
                       alert("上传失败")
                   }

               }
}
});
}