<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_0" multiple>  文件域

遇到的几个BUG 已经解决

1 多选文件域,如果没有上传成功或已上传成功,再次点击文件域名选择图片时,会累积上次的文件。

例如 第一次上传1.jpg  第二次点击上传 2.jpg 第二次的上传结果为1.jpg 2.jpg 上传了两张。

解决此问题思路:

1 在网上查了很多关于清除file文件域的办法,都不起作用/

2 最终用了删除直接的file文件域 重新创建一个file文件域 重新绑定事件,重复上传文件解决。

/**
* 初始化图片上传文件
*/
function init_list_imgs(){
if(!(window.FileReader && window.File && window.FileList && window.Blob)){
$.alert('您的浏览器不支持fileReader');
return false;
}
add_imgs();
} /**
* 动态添加的图片上传
*/
function add_imgs(){
imgs_div_html = '\
<li id="img_nav">\
<div class="item-content">\
<div class="item-media">\
<i class="icon icon-form-name"></i>\
</div>\
<div class="item-inner">\
<div class="item-title label">外观</div>\
<div class="item-input">\
<span class="icon icon-down" id="direct_ico" style="float: right"></span>\
<div style="clear: both;"></div>\
</div>\
</div>\
</div>\
</li>\
<li class="li_imgs" style="display:none">\
<div class="imgs">\
<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_0" multiple>\
<span></span>\
</div>\
</li>';
$('#wash_car_mem').after(imgs_div_html);
//点击 外观 事件
img_nav();
//绑定 事件
bind_event();
} /**
* 首次
*/
function bind_event(){
var file_input = $('.li_imgs').children('.imgs').last().children().first();
file_input_change(file_input);
} /**
* 区分 Ios android 绑定 文件上传事件
*/
function file_input_change(file_input){ file_input.next('span').on('click',function(){
$('#file_input_ss_'+file_input_id).click().trigger();
}); file_input.on('click',function(){
$(this).attr('disabled');
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
// 调安卓接口,调拍照和相册的弹窗
window.androidJsInterface.obtainFile();
} else {
ios_bind_change(file_input);
}
});
}
/**
* IOS 文件上传事件绑定
*/
function ios_bind_change(file_input){
file_input.on('change',function(){
//单通道
if(_deny_request){
remove_file_input($(this))
return;
}
_deny_request = true;
//载入动画
$.showPreloader(_up_img_msg);
if(!this.files.length){
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
$.hidePreloader();
_deny_request = false;
return; }else if(this.files.length > 6){
$.hidePreloader();
$.alert('一次最多只能选择6张图片哦',function(){_deny_request = false;$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');remove_file_input($(this));});
return;
}else{
var s = check_file(this.files);
remove_file_input($(this));
}
});
} /**
* 删除文件上传域 解决部分机型重复上传问题
*/
function remove_file_input(file_input){
file_input.remove();
++file_input_id;
$('.li_imgs').children('.imgs').last().children('span').before('<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_'+file_input_id+'" multiple>');
file_input_change($('#file_input_ss_'+file_input_id));
} /**
* IOS 图片上传
*/
function check_file(files){
//校验收集表单数据
var formdata = new FormData();
var bad_files = 0;
for(var i=0; i<files.length;i++){
if(/image\/\w+/.test(files[i].type)){
formdata.append("imgFile"+i, files[i]);
}else{
bad_files++;
}
}
if(bad_files >= files.length){
$.hidePreloader();
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
_deny_request = false;
return;
}
//提交
$.ajax({
type: "POST",
dataType: "json",
contentType: false,
cache : false,
processData : false,
async: true,
url: '?c=bzymgr/washcar&a=add_imgs&openid=<?php echo $this->openid;?>',
data:formdata,
success: function (res) {
if(res=='0'){
public_toast('照片上传失败,请稍后重试',1000);
return;
}
var html = '';
for(var i in res){
html += '<div class="imgs">\
<img src="'+res[i]+'" class="thumb_img"/>\
<b class="img_cancel" onclick="remove_img(this)">X</b>\
</div>';
//存储到localStorage
add_imgs_LocalStorage(res[i]);
}
//插入dom
$('.li_imgs').children('.imgs').last().before(html);
setTimeout(function(){
$.hidePreloader();
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
_deny_request = false;
},1000);
return;
},
error:function(){
public_toast('服务器离家出走了,请稍后重试',2000);
return;
},
});
} /**
* 删除 已上传图片
* 只删除本地 服务器不删除
*/
function remove_img(obj){
$.confirm('确认要删除这张图片吗?',function(){
pop_imgs_LocalStorage($(obj).prev('img').attr('src'));
$(obj).parent().remove();
return;
});
}

以上代码在IOS 9.3.1 中用 Input file 可以调用出 相册和相机

但是在IOS 8.4版本中,就直接访问相册了。 目前还没有好找到好的解决办法。

h5 input file ajax实现文件上传的更多相关文章

  1. input file美化,文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  2. vue项目内嵌入到app input type=file 坑(文件上传插件)

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  3. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  4. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  5. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  6. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  7. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  8. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

随机推荐

  1. 使用label在winfrom中添加分割线

    1.水平分隔线:GroupBox2. 水平,垂直分隔: Lable (AutoSize = false, BorderStyle= Fixed3D , 还要调整Size的大小 水平调整Height = ...

  2. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  3. IDEA打war包

    一 第一步创建一个web application:expolded 选择当前项目 二 新建一个web application: Archive 选择刚刚新建的Expoded  “For ‘...... ...

  4. linux rc.sysinit文件详解

    /etc/rc.d/rc.sysinit 系统初始化脚本的任务 .激活udev和selinux .根据/etc/sysctl.conf文件设定内核参数 .设定系统时钟 .装载键盘映射 .启用交换分区 ...

  5. shell中sed用法

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  6. 【Java】集合(List、Set)遍历、判断、删除元素时的小陷阱

    开发中,常有场景:遍历集合,依次判断是否符合条件,如符合条件则删除当前元素. 不知不觉中,有些陷阱,不知你有没有犯. 一.漏网之鱼-for循环递增下标方式遍历集合,并删除元素 如果你用for循环递增下 ...

  7. C语言的编译过程

  8. uTenux-OS-Task再探

    在第一节中我由于没有拿到开发板,所以被迫无奈,只能将uTenux操作系统移植到手中的一块STM32F103的开发板上,当时对于uTenux的理解还不够,只是看了一下文件架构和效果,虽然移植成功了,但是 ...

  9. Set Font Properties On Mouse Hover Of Push Button And Text Items At Run time In Oracle Forms

    Change the font size and weight of text items and push buttons on mouse hover in Oracle Forms.   An ...

  10. ImageMagick远程命令执行工具检测工具

    ImageMagick这个漏洞昨天晚上就出来了,今天才有时间研究一下,今天自己也测试了一下 效果图: ======================= 用lua写了一个检测脚本 print (" ...