ajax请求上传图片

 

1. html:

　　　

　<!-- 图片文本框 -->
　　　　<input type="file" class="form-control" id="file" name="file" onchange="javascript:preview(this)">
　　　　<!-- 这个是在上传之前回显图片图片展示 -->
　　　　<div id="preview">
　　　　　　<!--这个是为了将页面返回的图片展示出来的.默认隐藏-->
　　　　　　<img style="width: 100px; height: 100px;display:none" id="imgHidden" />
　　　　</div>

　　　　<!-- 提交...这里pageIndex和pageSize可传可不传,主要取决于提交之后是否需要回到当前页面. -->
　　　　<button type="submit" onclick="javascript:submitForm()" class="btn btn-primary">提交</button>

 

　　　2. js:

　　　　

function submitForm() {
                　　var formData = new FormData(); //将需要提交的参数封装起来
                　　formData.append("id", uuid);
                　　var zswb = $("#file").val(); //获取file中的内容,看是否有值
                　　if (zswb == '' || zswb.length < 1) { //没有file提交的时候走的接口
                　　　　$.ajax({
                　　　　　　url : '/editMovieWithoutFile',
                　　　　　　type : 'post',
                　　　　　　data : formData,
                　　　　　　processData : false,
                　　　　　　contentType : false,
                　　　　　　success : function(value) {
                　　　　　　　　var result = JSON.parse(value);
                　　　　　　　　if (result == 'true') {
                　　　　　　　　　　window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
                　　　　　　　　} else {
                　　　　　　　　　　Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
                　　　　　　　　}
                　　　　　　}
                　　　　});
                　　} else { //有file提交的时候走的接口
                　　　　formData.append("face", $("#file")[0].files[0]);
                　　　　$.ajax({
                　　　　　　url : '/bc/uploadFace',
                　　　　　　type : 'POST',
                　　　　　　data : formData,
                　　　　　　processData : false,
                　　　　　　contentType : false,
                　　　　　　success : function(value) {
                        location.reload();
                　　　　　　var result = JSON.parse(value);
                　　　　if (result == 'true') {
                　　　　　　window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
                　　　　} else {
                　　　　　　Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
                　　　　}
                　　　}
                　　});
                　}
                }
                //图片回显:
                function preview(file) {
                　　$("#imgHidden").css("display", "none");
                　　var prevDiv = document.getElementById('preview');
                　　if (file.files && file.files[0]) {
                　　　　var reader = new FileReader();
                　　　　reader.onload = function(evt) {
                　　　　　　prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
                　　　　}
                　　　　reader.readAsDataURL(file.files[0]);
                　　} else {
                　　　　prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + 
                file.value + '\'"></div>';
                　　}
                }

　　3.　web

　　　　

@RequestMapping(value = "/uploadFace", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject uploadFace(@RequestParam("face") MultipartFile image, @RequestParam("id") Integer uid)
            {
        String contentType = image.getContentType();
        String[] spStrings =  contentType.split("/");
        JSONObject rt = new JSONObject();
        Integer code = 10001;
        String message = "fail";
        if (spStrings.length > 1&&(spStrings[1].equals("jpeg")||spStrings[1].equals("png")||spStrings[1].equals("image")||spStrings[1].equals("img"))) {
            Page<Client> findByUserId = clientSErvice.findByUserId(uid.toString(), null);
            Client findOne = clientSErvice.findOne(uid);
            if (findOne != null) {
                if (findOne.getPhoto() != null) {
                    new File(face_lib + findOne.getPhoto()).delete();
                }
                String fileName = face_lib + findOne.getUsername()+"."+spStrings[1];
                FileOutputStream fos = null;
                try {
                    fos = new FileOutputStream(new File(fileName));
                } catch (FileNotFoundException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                try {
                    fos.write(image.getBytes());
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                try {
                    fos.flush();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                try {
                    fos.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                String username = findOne.getUsername();
                findOne.setPhoto(username+"."+spStrings[1]);
                clientSErvice.save(findOne);
                code = 10000;
                message="success";
                return rt;
            }
        }
        return rt;
    }

　　Http content-type: https://tool.oschina.net/commons