使用HTML5的file api上传图片
使用HTML5的file 转base64上传图片 ,但上传多张的时候为什么总是显示同一张。应该怎么改
<dl><dt class="h8">图片:</dt><dd><a href="javascript:void(0);" class="img-content"><input type="file" id="fielinput" class="hidden"></a><div id="txshow" class="tximg"></div><div id="zhizhao" style="display: none;"></div></dd></dl>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function (){
window.onload = function () {
var input = document.getElementById("fielinput");
var txshow = document.getElementById("txshow");
if (typeof (FileReader) === 'undefined') {
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
input.setAttribute('disabled', 'disabled');
} else {
input.addEventListener('change', readFile, false);
}
}
function readFile() {
var file = this.files[0];
//判断是否是图片类型
if (!/image\/\w+/.test(file.type)) {
alert("只能选择图片");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var i = $(txshow).children('#imgbox').length;
var img = '<div id="imgbox"><img class="imgstring" src="' + this.result + '"/></div>';
if(i<=2){
$(txshow).append(img);
$('#imgbox').each(function() {
var imgString = $(this).children('.imgstring').attr('src');
var imgstr;
var ipos;
var result = $(this).children('.imgstring')
ipos = imgString.indexOf(",");
imgstr=imgString.substring(ipos+1,imgString.length);
jQuery.ajax({
url: '/api/file/upload',
type: "post",
dataType: "json",
data:{imgstr:imgstr},
success: function (data) {
$('#zhizhao').append(data.Content + '###');
}
});
});
}
else{
alert('最多上传三张图片')
}
}
}
</script>