Native JS upload file, using new FormData ()

When creating a more content form, the form has a file upload, file upload also requires form submission, a single upload file is very good operation;

<form action= "interface" enctype= "Multipart/form-data" method= "POST" >    <input type= "file" name= "UploadFile"/ >    <input type= "Submit" value= "Submission"/></form>

However, the normal submission of data and upload files is not an interface, the background to receive parameters is not the same way; This requires two form forms, but the form form can not be nested, and the contents of the form is arranged in order, wearing two separate forms, writing style will be very troublesome;

So we need a JS code that dynamically creates the form table.

This method only supports new FormData () not supported under Ie10,ie10;

Get file

function AddFile () {

   document.getElementById (' test1 '). Value = "";
   var file = Document.queryselector (' input[type=file] '). Files[0];//ie10 below does not support
   var typestr= "Image/jpg,image/png,image/gif,image/jpeg";
   if (Typestr.indexof (file.type) >=0) {
      document.getElementById (' test1 '). Value = File.name;
      if (File.size > 2097152) {
            Alert ("Upload file cannot be greater than 2M");
         Return
      }else{

Upload (Path,file)

}
   }else{
      Alert ("Please upload images in jpg, PNG, GIF, JPEG)";
   }

Uploading files
functionUpload (path,theformfile) {varFD =NewFormData (); Fd.append (' File1 ', theformfile);//uploaded file: Key name, key valuevarURL =path;//Interface URL= URL? URL: "; varXHR =NULL; if(window. XMLHttpRequest) {//non-IE kernelXHR =NewXMLHttpRequest (); } Else if(window. ActiveXObject) {//IE Kernel, the earlier version of IE here is different, specifically can check theXHR =NewActiveXObject ("Microsoft.XMLHTTP"); } Else{XHR=NULL; }                        if(XHR) {Xhr.open ("POST", URL); Xhr.onreadystatechange=function() {                                if(Xhr.readystate = = 4 && xhr.status = 200) {                                    varResultvalue =Xhr.responsetext; vardata =Json.parse (Resultvalue); XHR=NULL;                        }} xhr.send (FD); }                    };

Native JS upload file, using new FormData ()