zoukankan      html  css  js  c++  java
  • 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 class="div-label"><span class="x">*</span>本人照片:</label>
                <div class="photo">
                    <div class="photo_loading"></div>
                    <div class="photo_add" id="photo_add">+</div>
                    <img src="" style=" 70px;height: 70px;display: none;border: 2px dotted #ccc;" id="tx-img"/>
                    <input id="file" name="file"   type="file" class="upload_image" 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;
        }
  • 相关阅读:
    Intellij IDEA13 创建多模块Maven项目
    oracle锁
    oracle rac负载均衡
    awk命令
    政务外网、政务专网、政务内网和互联网
    图片切换实现选中-未选中效果
    生成带logo 的二维码
    控制input为number时样式
    移动端适配的解决方法?
    input-checkbox选中及非选中样式设置
  • 原文地址:https://www.cnblogs.com/tplovejava/p/5473319.html
Copyright © 2011-2022 走看看