注意,以下操作中遇到兼容性问题:
1:在安卓和苹果手机显示相机相册问题:在页面打开时候执行以下函数:
<input type="file" id="filed" accept="image/*" style="opacity: 0;height: 70px;" capture="camera" multiple>
安卓:加了capture="camera"会显示,苹果去掉会显示
$(function(){
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf(\'iphone\') != -1) || (ua.indexOf(\'ipad\') != -1);
if (isIos) {
$("#filed").removeAttr("capture");
};
});
2:在做时时统计输入框字数时,使用onkeyup在苹果失效,会记录拼音字数....因此使用oninput会解决兼容性问题
首先:使用h5的input标签调用相机与相册-->一下代码使用添加图标覆盖了input标签,更加美观
<div class="col-xs-12" style="margin-top: 10px;" id="allup">
<div id="upload" class="col-xs-4" style="height:70px;margin-left: 0px;padding-bottom: 10px;background: url(${pageContext.request.contextPath}/Content/Images/addimg.jpg) no-repeat;background-size: 60px 60px">
<input type="file" id="filed" accept="image/png,image/jpg" style="opacity: 0;height: 70px;" multiple>
</div>
</div>
其次:添加图片后并显示,在图片右上角加删除符号
//在input file内容改变的时候触发事件
$(\'#filed\').change(function(){
//获取input file的files文件数组;
var nums=$("div[name=\'imgup\']").length;
//还可以上传几张图片
var canup=3-nums;
//$(\'#filed\')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var filearray = $(\'#filed\').get(0).files;
//创建用来读取此文件的对象
$.each(filearray, function(i, file) {
//先拿到已经有上传几张图片了
if(i<canup){
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
$(\'#upload\').before("<div name=\'imgup\' class=\'col-xs-4\' style=\'height:60px;width:70px;padding-right:5px;padding-left:5px;padding-bottom: 8px;\'>\n" +
"<input type=\'hidden\' name=\'hidname\' value=\'"+file.name+"\'>\n" +
"<img src=\'"+e.target.result+"\' style=\'width:60px;height: 60px;\'></img>\n" +
"<img style=\'position: absolute;top: -1px; right: 7px; z-index: 10;width:17px;\' src=\'${pageContext.request.contextPath}/Content/Images/del_img.png\' onclick=\'deleteImg(this)\'></img>\n" +
"</div>");
}
}
if(filearray.length>=canup){
$("#upload").hide();
$("#thirdjpg").css("color","red");
}
});
})
最后:添加反馈,使用xmlhttprequest发送请求
//添加反馈
function addMyFeed(){
var files= $(\'#filed\').get(0).files;
//如果有选择图片则上传图片
//拿到所反馈的意见
var bodystr=$("#inputtext").val();
//拿到最终选择的图片名称,以逗号隔开
var imgstr="";
$("input[name=\'hidname\']").each(function(i,imgname){
imgstr+=$(imgname).val()+\',\';
});
//意见与反馈的图片是否都为空判断
if(bodystr.trim()==""&&imgstr.trim()==""){
layer.open({ shadeClose: false, content: \'反馈意见不能为空\', time: 6, btn: \'确定\' });
return;
}
imgstr=imgstr.substring(0,imgstr.length-1);
var formData= new FormData();
if(files.length>0){
var a=files.length;
//FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面
$.each(files, function(i, file) {
<!--..............................-->
/*for(var i=0;i<files.length;i++){
var reader = new FileReader();
reader.readAsDataURL(files[i]);
//reader.onload = function(e){
var IMG = new Image();
IMG.src = reader.result;
// IMG.onload = function(IMG){
var w = IMG.naturalWidth, h = IMG.naturalHeight, resizeW = 0, resizeH = 0;
// maxSize 是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低
var maxSize = {
width: 500,
height: 500,
level: 0.6
};
if(w > maxSize.width || h > maxSize.height){
var multiple = Math.max(w / maxSize.width, h / maxSize.height);
resizeW = w / multiple;
resizeH = h / multiple;
} else {
// 如果图片尺寸小于最大限制，则不压缩直接上传
//return callback(file)
formData.append(\'filemess\',files[i]);
return;
}
var canvas = document.createElement(\'canvas\'),
ctx = canvas.getContext(\'2d\');
canvas.width = resizeW;
canvas.height = resizeH;
ctx.drawImage(IMG, 0, 0, resizeW, resizeH);
/!* var base64 = canvas.toDataURL(\'img/jpg\', maxSize.level);
var base=window.atob(base64.split(\',\')[1]);
var buffer = new ArrayBuffer(base.length);
var ubuffer = new Uint8Array(buffer);
for (var i = 0; i < base.length; i++) {
ubuffer[i] = base.charCodeAt(i)
}
var blob;
try {
blob = new Blob([ubuffer], {type: \'img/jpg\'});
} catch (e) {
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
if(e.name === \'TypeError\' && window.BlobBuilder){
var blobBuilder = new BlobBuilder();
blobBuilder.append(ubuffer);
blob = blobBuilder.getBlob(\'img/jpg\');
}*!/
formData.append(\'filemess\',IMG);
}
}*/
<!--.................................-->
formData.append(\'filemess\',file);
});}
formData.append(\'imgstr\',imgstr);
formData.append(\'bodystr\',bodystr);
var xhr= new XMLHttpRequest();
var layerIndex = layer.open({ shadeClose: false, type: 2, content: \'提交反馈中\', time: 30 });
xhr.open(\'POST\', \'addMyFeed?browserType=weChat\',true);
xhr.send(formData);
xhr.onreadystatechange = function(data){
if(xhr.readyState == 4 && xhr.status == 200){
var res = JSON.parse(xhr.responseText);
var feedMess=res.feedMess;
if(feedMess){
// layer.close(layerIndex);
layer.open({
shadeClose: false,
content: \'反馈成功\'
, btn: [\'确定\']
, yes: function (index) {
var time=new Date().getTime();
var layerIndex =window.location = \'myFeed?browserType=weChat&time=\'+time;
}
});
}else{
layer.close(layerIndex);
layer.open({ shadeClose: false, content: \'反馈失败,请重试！\', time: 6, btn: \'确定\' });
return;
}
};
xhr.onerror = function(){
layer.close(layerIndex);
layer.open({ shadeClose: false, content: \'反馈失败,请重试！\', time: 6, btn: \'确定\' });
return;
};
}
}
后台接收:
