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版本中，就直接訪問相冊了。 目前尚未好找到好的解決辦法。