前端使用FormData实现上传文件

来源：互联网发布：js isnan函数编辑：程序博客网时间：2024/06/02 04:07

场景: 用户通过点击图片弹出上传文件的框框，然后选择将要替换的图片，选择后实时预览，点击确定后通过ajax上传到服务器.

前端html

<div id="img_div">    <input type="file" id="img_upload">    <img id="picture" src="$picturePath$" alt="头像" class="img-rounded"></div>

将上述html中的上传input元素的透明度设置为0，并且设置宽度和高度，用它来遮住a标签,注意设置外部div的position

#img_div{    position: relative;}#img_upload{    opacity: 0;    position: absolute;    top: 0;    left: 0;    width: 100%;    z-index: 9;    height: 100%;}

JS代码

//为头像上传设置实时预览监听器function setOnchangeListener() {    $("body").on("change","#img_upload",previewFile);}//实时预览上传图片function previewFile() {    var preview=$("#picture");    var file=$("#img_upload")[0].files[0];    var reader=new FileReader();    reader.addEventListener("load",function () {       preview.prop("src",reader.result);    },false);    if(file){        reader.readAsDataURL(file);    }}//上传图片function setPicture() {    var file=$("#img_upload")[0].files[0];    if(file==null)        return;    var formData=new FormData();    formData.append('file',file);    var url=serverUrl+"uploadPic";    $.ajax({        url:url,        type:'POST',        cache:false,        data:formData,        processData:false,        contentType:false,        xhrFields: {            withCredentials: true        },        crossDomain: true,    });}

其中

processData:false,contentType:false,

的设置需要注意。

这里后台我用的是java web（SpringMVC）就贴一下控制器接收上传文件的代码

@RequestMapping("/uploadPic")    public @ResponseBody Object  handleUploadPic(@RequestParam("file")MultipartFile file, HttpServletRequest request){        String userName=cookieService.getUserName(request);        String picUrl=fileService.saveImg(file);        String oldPicUrl=manageService.getPicUrl(userName);        fileService.deleteFile(oldPicUrl);        manageService.setPicUrl(userName,picUrl);        Map<String,Object> result=new HashMap<String, Object>();        result.put(keyStatus,valueStatusOk);        return result;    }

其中file就是接收到的上传文件

0 0