Ajax file upload, vue axios file upload

Ajax will have to do file upload compatibility issues. Only a few high version of the browser can implement file upload function. Ie6 ie7 low version of the browser can not be achieved. Because ajax file upload use Formdata, it is a new h5, there are compatibility issues, low version of the browser is not supported.

Data to formdata added:

Formdata calling the append method to get to upload files with native file dom objects - 0. Hair aiax request, with POST request method, add attributes.

Native ajax upload the code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>

  <p>data</p><input id='data' type="file" name="data" />
  <p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
  <input type="button" value="添加文件" id="btn" />

</body>

</html>
<script>

  btn.onclick = function () {
    // 前后端交互
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "请求接口", true);// pass over the data, true: Asynchronous false: synchronous 
    xhr.send (formData);
    formData.append ( "Data", data.files [0]);
    formData.append ( "type", input1.value);
    var formData the FormData new new = ();
    = function xhr.onreadystatechange () { 
      IF (xhr.readyState == == 200 is xhr.status &&. 4) { 
        var In Flag = xhr.responseText; // get the response back to 
        the console.log (In Flag); 
      } 
    } 
  } 

</ script>

Jquery ajax upload the code:

NOTE: To add the following three attributes transmission request ajax: without being given

Cache:false

processData:false

contentType:false

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

  <p>data</p><input id='data' type="file" name="data" />
  <p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
  <input type="button" value="添加文件" id="btn" onclick="test();" />

</body>

</html>
<script>

  function test() {
    var formData = new FormData();

    formData.append("type", input1.value);
    formData.append("data", data.files[0]);

    $.ajax({
      url: "请求接口",
      Method: "the POST", 
      Cache: to false, // do not set the cache file 
      Data: formData, 
      the processData: to false, // data is not converted into a string 
      contentType: false, // when upload files to avoid its operation JQuery 
      success : function (Result) { 
        the console.log (Result); 
      } 
    }) 
  } 

</ Script>

Vue axios upload the code:

      let formData = new FormData();
      formData.append('type', input1.value);
      formData.append('data', data.files[0]);

      axios({
        method: 'post',
        url: "请求接口",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(res => {
        })
        .catch(err => {
        });

Ajax file upload, vue axios file upload

Guess you like