h5 input file ajax实现文件上传

<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版本中，就直接访问相册了。 目前还没有好找到好的解决办法。