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="width: 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; }
时间: 2024-10-23 08:48:26