點擊圖片並拖放圖片

Question

當用戶在div中拖放圖像時，我可以進行圖像交換。 我似乎不知道如何在單擊div時增加上傳/交換圖像的功能。

以下是我現在所擁有的。

let img = new Image()
document.getElementById("logo2").appendChild(img);

function makeSwappable(imgEl){
  imgEl.addEventListener('drop', dropHandler)
  imgEl.addEventListener('dragover', dragoverHandler)
  imgEl.addEventListener('dragleave', dragleaveHandler)

  function dragoverHandler(e){
    e.preventDefault()
    e.target.style.opacity = 0.2
    e.target.style.transition = "0.4s"
    e.target.style.border = "dotted blue 0px"
    e.target.style.transform = "scale(0.97)"
    e.target.style.transition.timing.function = "ease-out"
  }
  function dragleaveHandler(e){
    e.preventDefault()
    e.target.style.opacity = 1
    e.target.style.border = "dotted transparent 0px"
    e.target.style.transform = "scale(1)"
    e.target.style.transition = "0.7s"
  }

  function dropHandler (e){
    e.preventDefault()

    e.target.style.opacity = 1
    e.target.style.border = "dotted transparent 0px"
    e.target.style.transform = "scale(1)"
    e.target.style.transition = "0.7s"

    let file = e.dataTransfer.files[0]
    let fileReader = new FileReader()
    fileReader.onload = ((file)=>{
      return (ev)=>{
        e.target.src = ev.target.result
      }
    })(file)
    fileReader.readAsDataURL(file)
  } 
}

Answer 1

這是你的解決方案

 // ************************ Drag and drop ***************** // let dropArea = document.getElementById("drop-area") // Prevent default drag behaviors ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false) document.body.addEventListener(eventName, preventDefaults, false) }) // Highlight drop area when item is dragged over it ;['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false) }) ;['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false) }) // Handle dropped files dropArea.addEventListener('drop', handleDrop, false) function preventDefaults (e) { e.preventDefault() e.stopPropagation() } function highlight(e) { dropArea.classList.add('highlight') } function unhighlight(e) { dropArea.classList.remove('active') } function handleDrop(e) { var dt = e.dataTransfer var files = dt.files handleFiles(files) } let uploadProgress = [] let progressBar = document.getElementById('progress-bar') function initializeProgress(numFiles) { progressBar.value = 0 uploadProgress = [] for(let i = numFiles; i > 0; i--) { uploadProgress.push(0) } } function updateProgress(fileNumber, percent) { uploadProgress[fileNumber] = percent let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length console.debug('update', fileNumber, percent, total) progressBar.value = total } function handleFiles(files) { files = [...files] initializeProgress(files.length) files.forEach(uploadFile) files.forEach(previewFile) } function previewFile(file) { let reader = new FileReader() reader.readAsDataURL(file) reader.onloadend = function() { let img = document.createElement('img') img.src = reader.result document.getElementById('gallery').appendChild(img) } } function uploadFile(file, i) { var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload' var xhr = new XMLHttpRequest() var formData = new FormData() xhr.open('POST', url, true) xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest') // Update progress (can be used to show progress indicator) xhr.upload.addEventListener("progress", function(e) { updateProgress(i, (e.loaded * 100.0 / e.total) || 100) }) xhr.addEventListener('readystatechange', function(e) { if (xhr.readyState == 4 && xhr.status == 200) { updateProgress(i, 100) // <- Add this } else if (xhr.readyState == 4 && xhr.status != 200) { // Error. Inform the user } }) formData.append('upload_preset', 'ujpu6gyk') formData.append('file', file) xhr.send(formData) } 

 body { font-family: sans-serif; } a { color: #369; } .note { width: 500px; margin: 50px auto; font-size: 1.1em; color: #333; text-align: justify; } #drop-area { border: 2px dashed #ccc; border-radius: 20px; width: 480px; margin: 50px auto; padding: 20px; } #drop-area.highlight { border-color: purple; } p { margin-top: 0; } .my-form { margin-bottom: 10px; } #gallery { margin-top: 10px; } #gallery img { width: 150px; margin-bottom: 10px; margin-right: 10px; vertical-align: middle; } .button { display: inline-block; padding: 10px; background: #ccc; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; } .button:hover { background: #ddd; } #fileElem { display: none; } 

 <div id="drop-area"> <form class="my-form"> <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p> <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)"> <label class="button" for="fileElem">Select some files</label> </form> <progress id="progress-bar" max=100 value=0></progress> <div id="gallery" /></div> </div> 

Answer 2

這是您需要進行的一些更改：

-    e.target.style.transition.timing.function = "ease-out"
+    e.target.style.transitionTimingFunction = "ease-out"

並建議您使用對象URL而不是創建base64 URL
並在不需要更改值時使用const而不是let

-    let file = e.dataTransfer.files[0]
-    let fileReader = new FileReader()
-    fileReader.onload = ((file)=>{
-      return (ev)=>{
-        e.target.src = ev.target.result
-      }
-    })(file)
-    fileReader.readAsDataURL(file)

+    const file = e.dataTransfer.files[0]
+    e.target.src = URL.createObjectURL(file)

現在要上傳文件，您需要發出ajax請求並將file發送到上傳網址
最簡單的就是：

fetch('https://httpbin.org/post', { method: 'POST', body: file })

但是根據您的需要，您可能還需要將其附加到文件輸入中 ，或者創建一個FormData並在上傳附件時指定一些上傳字段。 您可能還想使用XMLHttpRequest來顯示上傳進度指示器