H5 input file Ajax for uploading files

<input type= "File" accept= "image/*" height= "0" class= "file_input" id= "file_input_ss_0" multiple> file field

Several bugs that have been encountered have been resolved

1 Multi-Select File domain, if the upload is not successful or uploaded successfully, click the file name again to select a picture, the last file will accumulate.

For example, the first time uploading 1.jpg second click Upload 2.jpg Second upload results for 1.jpg 2.jpg uploaded two.

To solve this problem:

1 on the Internet to check a lot of files to clear the file domain, do not work/

2 finally used to delete the direct file domain re-create a file domain rebinding event, duplicate upload file resolved.

/** * Initialize image upload file*/functionInit_list_imgs () {if(! (Window. FileReader && window. File && window. FileList &&window. Blob) {$.alert (' Your browser does not support FileReader '); return false;    } add_imgs (); }/** * Dynamically added image upload*/functionAdd_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" > Appearance </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); //Click Appearance eventsImg_nav (); //Binding Eventsbind_event ();}/** * For the first time*/functionbind_event () {varFile_input = $ ('. Li_imgs '). Children ('. IMGs ')). Last (). Children (). First ();    File_input_change (File_input); }/** * Differentiate Ios android binding file upload event*/functionFile_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 '); varU =navigator.useragent; if(U.indexof (' Android ') >-1 | | u.indexof (' Linux ') >-1) {//Android Phone            //tune the Android interface, adjust the photos and the pop-up window of the albumWindow.androidJsInterface.obtainFile (); } Else{ios_bind_change (file_input); }        });}/** * IOS File Upload event bindings*/functionIos_bind_change (file_input) {File_input.on (' Change ',function(){        //Single channel        if(_deny_request) {remove_file_input ($ ( This))            return; } _deny_request=true; //Loading Animations$.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 (' You can select up to 6 pictures at a time. 'function() {_deny_request =false; $ ('. Li_imgs '). Children ('. IMGs '). Last (). Children (). First (). Removeattr (' disabled '); Remove_file_input ($ ( This));}); return; }Else{                vars = Check_file ( This. files); Remove_file_input ($ ( This));    }        }); }/** * Delete file upload domain to solve the problem of repeated uploading of some models*/functionRemove_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 image upload*/functionCheck_file (files) {//School Acceptance Collection form data         varFormdata =NewFormData (); varBad_files = 0;  for(vari=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; }          //Submit$.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 (' Photo upload failed, please try again later ', 1000); return; }                  varhtml = ' ';  for(varIinchRes) {HTML+ = '<div class= "IMGs" > ' +res[i]+ '"class=" thumb_img "/> <b class=" Img_cancel "onclick=" remove_img (This) ">x</ B> </div>‘; //Store to Localstorageadd_imgs_localstorage (Res[i]); }                      //Insert 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 (' The server ran away, please try again later ', 2000); return; },           }); }/** * Delete uploaded images * Only delete local server does not delete*/functionremove_img (obj) {$.confirm (' Are you sure you want to delete this image? ‘,function() {pop_imgs_localstorage (obj). Prev (' img '). attr (' src ')));        $ (obj). Parent (). remove (); return;    }); }

The above code in iOS 9.3.1 with Input file can call out album and camera

But in iOS 8.4, the album was accessed directly. No good solutions have been found yet.

H5 input file Ajax for uploading files