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  style="margin-top: 10px">
            <label><span>*</span>本人照片：</label>
            <div>
                <div></div>
                <div id="photo_add">+</div>
                <img src="" style="width: 70px;height: 70px;display: none;border: 2px dotted #ccc;" id="tx-img"/>
                <input id="file" name="file"   type="file" onchange="uploadFile()">
            </div>
            <p style="margin-top: 10px;font-size: 13px;color: #999">(尺寸不大于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;
    }

 

总结

以上是如意编程网为你收集整理的html5 formData上传 针对app端的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。