
正文
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:;
cursor: pointer;
}.photo{
position: relative;
width: 70px;
height: 70px;
background-size: 100%;
}.photo_loading{
position:absolute;
top:2px;
left:2px;
z-index:;
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;
}







