jsp代码:
<div class="control-group">
<label class="control-label">xxx:</label>
<div class="controls">
<span class="help-inline">
<textarea id="textAreaContent" name="content" style="width: 800px;height: 150px;" maxlength="500" placeholder="最多输入500字"></textarea>
</span>
</div>
<br>
<label class="control-label">上传图片:</label>
<div class="controls p-img">
<!-- <div class="h3">上传图片<p id="imgCount" style="display: none;">完成<span>2</span>/5</p></div> -->
<ul>
<li id="addImg">
<b></b>
<p>最多5张</p>
<input type="file" οnchange='previewImage(this)' id="input"/>
</li>
</ul>
<div class="clearf"></div>
</div>
<label class="control-label"></label>
<div class="controls">
<input class="btn btn-primary" οnclick="resolve();" type="button" value="问题已解决"/>
</div>
</div>
js代码:
previewImage=function(file){
var formData = new FormData();
var tempObj={};
var Orientation = null;
tempObj.module='images/ask';
tempObj.userCode='1000154873';
tempObj.versionName='1.0';
tempObj.language='zh_CN';
tempObj.device_token='';
tempObj.platform='HTML5';
tempObj.appCode='30006';
tempObj.appkey='';
tempObj.contentType='png';
// ajax方法要写在EXIF.getData里面,因为EXIF.getData是异步方法
EXIF.getData($('#input')[0].files[0], function() {
var newdata = EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
console.log(Orientation);
tempObj.orientation = Orientation;
formData.append("content", JSON.stringify(tempObj));
formData.append('file', $('#input')[0].files[0]);
formData.append("sign",'sign');
formData.append("module","images/ask");
//console.log(formData.get("file"))
var i=0;
i = $('.upload-img').length;
$('.p-img ul').prepend('<li class="upload-img" id="uploadimg'+i+'"><p style="padding-top:76px;font-size:14px;background: url(../../assets/images/loading2.gif) no-repeat center 25px;background-size: 24% auto;">上传中</p><a></a></li>')
var length = $('.p-img ul li').length;
$('#imgCount span').html(length-1);
if(length>5){
$('#addImg').hide()
}
$.ajax({
url : '${ctx}/xxxx',
type : 'POST',
data : formData,
processData : false,
contentType : false,
dataType: 'JSON',
success : function(res) {
console.log(res);
console.log(formData);
if(res&&res.status == '2000'){
var src = res.data.url;
var path = res.data.files[0].path;
var name = res.data.files[0].name;
var size = res.data.files[0].size;
$('#uploadimg'+i).attr('type',path);
$('#uploadimg'+i).attr('name',name);
$('#uploadimg'+i).attr('size',size);
$('#uploadimg'+i).html('<img id="imghead'+i+'" src="'+src+path+'"/><a></a>');
$('.p-img li img').width($('#addImg').width());
$('.p-img li img').height($('#addImg').width());
$('#imgCount').show();
$('#imghead'+i).closest('li').css('border-color','#fff');
$('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].fileName value ="'+name+'">');
$('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].filePath value ="'+path+'">');
$('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].fileSize value ="'+size+'">');
}else {
$("#uploadimg" + i).remove();
alertx(res.message);
}
},
error: function(err){
$("#uploadimg" + i).remove();
console.log("err:"+err);
alertx(err);
},
beforeSend: function(){
},
});
});
};