👉 Requirement: Drag the image to the browser page, the browser page background will become the image

👉 Layout preparation:

  • One H3, say “Drag the image inside the dotted line”
  • Add a border to the body to display the uploaded image
  • By default, the body has no height, so the border has no height, and since the default height of the document is the height that the browser can see, we set both the HTML and body height to 100%, so that the HTML inherits the height of the document, and the body inherits the height of the HTML, both show the height of the viewable area, The layout code is as follows:
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    html.body {
      height: 100%;
    }
    body {
      border: 5px dashed black;
    }
  </style>
</head>
<body>
  <h3>Drag the image inside the dotted line</h3>
</body>
</html>
Copy the code

👉 Core technology:

  • Dragover mouse hover event, drop mouse drag event, E.preventDefault () blocks the default behavior of the event, url.createObjecturl () decodes the URL address, e.datatransfer.files [0] retrieves the dragged file

👉 ideas:

  1. Since you need to drag the image to the browser, you need to add a dragover event to the body to prevent the default behavior of mouse drag
  2. Add a drag and drop event to the body and drag the image into the browser. When this happens, the browser will open a new page to display the image. This is because, by default, the browser has a drag-and-drop behavior, that is, when a file comes in, open a new page to show an image, so
    • Event to clear the browser’s default behavior of dragging and dropping files in to open a new page to display images
    • Then, get the file that you dragged in; So how do you get it? At this point, you need the browser’s event object
  3. The browser’s Event object stores information about a set of events, such as coordinates, and so on, stored inThe dataTransfer filesBy default, the file is a pseudo-array, so you can use the e.datatransfer. files[0] method to get the file dragged in
  4. However, the data obtained by default is URL address information, so useURL.createObjectURL()The URL address is decoded. After decoding, it is the path address of the file
  5. Assign the decoded file address to the body background

👉 code implementation:

  <script>
    // The default behavior of blocking events is only to allow the drop event to be triggered
    document.body.ondragover = function (e) {
      e.preventDefault()
    }
    //2. For browsers, there is also a drag and drop behavior by default
    // Its default drag-and-drop behavior is to open the file you dragged in
    document.body.ondrop = function (e) {
      // Therefore, blocking prevents the default behavior of the browser: opening the file
      e.preventDefault()
      // The event object holds all the relevant information when the event is triggered
      // Drag in the event object. Datatransfer. files
      // It is a pseudo-array that holds all the files that have been dragged in
      // if I subscript 0, I get the first one
      // console.log(e.dataTransfer.files[0])
      // I can't assign directly because I want the path, but you gave me a file object
      // document.body.style.background = `url(${e.dataTransfer.files[0]})`

      // Convert the file object into a temporary URL (used in the Ajax phase)
      let url = URL.createObjectURL(e.dataTransfer.files[0])
      document.body.style.background = `url(${url}) no-repeat center / cover`
    }
  </script>
Copy the code