This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Internet Explorer 9 10 Cannot recognize binary objects whose input type is file

Image preview and upload. Event.target. files[0] doesn’t work in IE9, though. It doesn’t seem to have FileReader yet. What should I do now?

  <input type="submit" value="Submit" />
Copy the code

Prepare knowledge

Judge the browser

If (the navigator. UserAgent. IndexOf (" MSIE 9.0) > 0 | | the navigator. UserAgent. IndexOf (" MSIE 10.0) > 0) {this. Ie 9 = true; }Copy the code

Specific steps

Only in IE9 will display HTML, target points to an IFrame ID, otherwise normal display, normal call

<form v-if="ie9" id='formFile' name='formFile' method="post" action='http://localhost:8080/api/common/file/file2' target='frameFile' enctype="multipart/form-data"> <input type='file' class="up-input2" id='fileUp' name='file' @change="uploadAnnex()"/> </form> <! -- The iframe gets the posted form data and starts accessing the posted page address internally. Internally it will refresh the page, but this doesn't matter because the current iframe is hidden by display: None! So this gives the user looks like no refresh page file upload, in fact is just a small trick! --> <iframe id='frameFile' name='frameFile'></iframe>Copy the code

Js calls

getFile('#formFile input') var inputDomStr = '#formFile'; var frame= $(inputDomStr); // Submit from the form frame.submit(); EmptyFile (inputDomStr, this.uploadAnnexie9) emptyFile(inputDomStr, this.uploadAnnexie9) Document.getelementbyid ("frameFile").onload=function(){var result=document.getElementById('frameFile').contentWindow.document.body.innerText; alert(result) }Copy the code

Peripheral knowledge

The onchange method will disable the function of uploading the same file multiple times and will not send ajax requests

Input [type=file], onchange, onchange, onchange, onchange, onchange, onchange, onchange, onchange, onchange Empty the current input value. Event. The target. The value = “”;

Clear input Type value

function emptyFile(inputDomStr,backFun){ let target = $(inputDomStr); target.val(""); var cf=target.clone(); target.after(cf); target.remove(); $(inputDomStr).on('change',()=>{ backFun && backFun(); })}Copy the code

Upload a file with input File, and the front end gets information about the file

Get the size of the file

function getFileSize(obj){ try{ var file = obj; file.select(); file.blur(); var path = document.selection.createRange().text; var fso = new ActiveXObject("Scripting.FileSystemObject"); fileSize = fso.GetFile(path).size; alert(fileSize); }catch(e){alert(e+"\n"+" Error:Automation cannot create object;" +"\n"+" Please configure the browser as follows: "+"\n"+" Please open [Internet Options - Security -Internet- Custom Level -ActiveX Controls and Plug-ins - Initialize and execute Scripts for ActiveX Controls not marked as Safe to execute Scripts (unsafe) - click Enable - OK] "); return window.location.reload(); }}Copy the code