使用HTML5的file api上传图片

qq_32343391 2016-10-17 11:53:51
使用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>
...全文
947 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
当作看不见 2016-10-17
  • 打赏
  • 举报
回复
引用 2 楼 qq_32343391 的回复:
[quote=引用 1 楼 qq_29594393 的回复:] 使用三个input file 标签,一个标签只能上传一个,所以你选择的老是最后一个,隐藏其中两个,其中一个选择文件完成,隐藏它,让下一个显示,(用一个框框显示三个标签的内容,)
如果是多张呢,比如可以上传20张以下的图片,那样不是很麻烦吗,请问还有什么别的简单一点方法吗[/quote] 动态生成input 标签,可用的永远都是1,选择一个文件,加一个input ,删除一个,连这个标签一起删除,就无论多少个文件都一样,限制20个,来个计数器限制就OK,
qq_32343391 2016-10-17
  • 打赏
  • 举报
回复
引用 1 楼 qq_29594393 的回复:
使用三个input file 标签,一个标签只能上传一个,所以你选择的老是最后一个,隐藏其中两个,其中一个选择文件完成,隐藏它,让下一个显示,(用一个框框显示三个标签的内容,)
如果是多张呢,比如可以上传20张以下的图片,那样不是很麻烦吗,请问还有什么别的简单一点方法吗
当作看不见 2016-10-17
  • 打赏
  • 举报
回复
使用三个input file 标签,一个标签只能上传一个,所以你选择的老是最后一个,隐藏其中两个,其中一个选择文件完成,隐藏它,让下一个显示,(用一个框框显示三个标签的内容,)
qq_32343391 2016-10-17
  • 打赏
  • 举报
回复
引用 3 楼 qq_29594393 的回复:
[quote=引用 2 楼 qq_32343391 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] 使用三个input file 标签,一个标签只能上传一个,所以你选择的老是最后一个,隐藏其中两个,其中一个选择文件完成,隐藏它,让下一个显示,(用一个框框显示三个标签的内容,)
如果是多张呢,比如可以上传20张以下的图片,那样不是很麻烦吗,请问还有什么别的简单一点方法吗[/quote] 动态生成input 标签,可用的永远都是1,选择一个文件,加一个input ,删除一个,连这个标签一起删除,就无论多少个文件都一样,限制20个,来个计数器限制就OK,[/quote] 好的,谢谢

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧