Tutorial on how to use JavaScript to preview and upload images without refreshing the page

This article mainly introduces in detail the JavaScript function of uploading preview images without refreshing. It has certain reference value. Interested friends can refer to

How to implement the function of uploading without refreshing? Handwritten non-refresh upload requires two things, FormData and FileReader.

FileReader is used for image browsing.

FormData is used for ajax requests.

html code

First create a container for the form and image

##

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <p>
    <img alt="" id="img"/>
  </p>

javascript code

FormData:

The FormData object can be used to assemble a set of key/value pairs for sending requests using XMLHttpRequest. It makes sending form data more flexible and convenient because it can be used independently of the form. If you set the form's encoding type to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted by the form through the submit() method.

Here the FormData object is used to obtain all the input data in the form, and then use an ajax request to send the data to the specified url, so that there will be no jump when the form is submitted.

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

The FileReader object allows web applications to asynchronously read files stored in The contents of a file (or raw data buffer) on the user's computer, using a File or Blob object to specify the file or data to be read.

Here the FileReader object is used to obtain the image from file and convert the image into Data URL form to display in the pre-created container.

function readAsDataURL(){
  //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
      alert("看清楚，这个需要图片！");

      return false;
    }else{
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
      var result=document.getElementById("img");
      //显示文件
      result.src= this.result ;
    }
  }
}

The above is the detailed content of Tutorial on how to use JavaScript to preview and upload images without refreshing the page. For more information, please follow other related articles on the PHP Chinese website!