html5 formData上传 针对app端


function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed(2) > 2048) { alert('照片不能大于2M!'); }else{ var oldPic = $("#picurl").val(); var url = ""; if(oldPic != ""){ url = "weixin/uploadTx?oldPic="+oldPic; }else{ url = "weixin/uploadTx?oldPic="; } $('.photo_loading').show(); var fd = new FormData(); fd.append("header_img_id", document.getElementById("file").files[0]); var xhr = new XMLHttpRequest(); //请求完成后执行的操作 xhr.onload = function(evt) { var fileUrl = evt.target.responseText; fileUrl = delHtmlTag(fileUrl); var htfileurl = fileUrl.replace("thumb_",""); $("#picurl").val(htfileurl); $("#tx-img").attr("src", "upload/"+fileUrl); $("#tx-img").show(); $("#photo_add").hide(); $('.photo_loading').hide(); } xhr.open("POST", url); xhr.send(fd); } }

css

.upload_image{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #EEE;
    opacity: 0;
    cursor: pointer;
}

.photo{
    position: relative;
    width: 70px;
    height: 70px;
    background-size: 100%;
}
    
    
.photo_loading{
    position:absolute; 
    top:2px; 
    left:2px; 
    z-index:99; 
    background: url(../../images/photo_loading.gif) no-repeat 0 0;
    opacity: 0.8; 
    filter:alpha(opacity=80); width:70px; height:70px;
    display: none;
}

.photo_add{
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    border: 2px dotted #ccc;
    font-size: 24px;
}

html

<div  >
            <label class="div-label"><span class="x">*</span>本人照片:</label>
            <div class="photo">
                <div class="photo_loading"></div>
                <div class="photo_add" >+</div>
                <img src=""  />
                <input  name="file"   type="file" class="upload_image" onchange="uploadFile()">
            </div>
            <p >(尺寸不大于2M)</p>
        </div>

控制层

@RequestMapping(value="/uploadTx")
    @ResponseBody
    public String uploadTx(MultipartFile header_img_id, String oldPic){
        //删除
        if(!oldPic.equals("")){
            String realPath = fileRootPathServ.getRealPath(oldPic);
            File file = new File(realPath);
            if(file.exists()){
                file.delete();
            }
        }
        
        String fileUrl = "";
        //上传图片
        if(!header_img_id.isEmpty()){
            FileModel fileModel = fileUploadSvc.uploadImg(header_img_id, "TX");
            fileUrl = fileModel.getFileUrl();
        }
                
        return fileUrl;
    }