调用mysql显示照片

照片"/>

调用mysql显示照片

注意,以下操作中遇到兼容性问题:

1:在安卓和苹果手机显示相机相册问题:在页面打开时候执行以下函数:

安卓:加了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标签,更加美观

其次:添加图片后并显示,在图片右上角加删除符号

//在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

var reader = new FileReader();

//使用该对象读取file文件

reader.readAsDataURL(file);

//读取文件成功后执行的方法函数

reader.οnlοad=function(e){

//读取成功后返回的一个参数e，整个的一个进度事件

//选择所要显示图片的img，要赋值给img的src就是e中target下result里面

$('#upload').before("

\n" +

"\n" +

"\n" +

"\n" +

"

");

}

}

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

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;

};

}

}

后台接收: