js圖片拖拽系列3----拖拽本地圖片並上傳

阿新 • • 發佈：2021-02-08

js圖片拖拽系列3----拖拽本地圖片並上傳
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 

    <style>
        .box {
            width: auto;
            height: 200px;
            width: 200px;
            overflow: hidden;
            background-color: rgb(120, 138, 101)
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
< 
body>
    <div id="img" class="box" ondragover="dragOver(event)" ondrop="drop(event)"></div>
    <script src="scripts/axios.min.js"></script>
    <script>
        function dragStart(e) {
            e.dataTransfer.setData 
("id", e.target.id);//將img的id寫入
        }
        function dragOver(e) {
            e.preventDefault();//阻止拖拽結束的預設行為，會把檔案作為連結開啟。
        }
        function drop(e) {
            e.preventDefault();//阻止拖拽結束的預設行為，會把檔案作為連結開啟。
            var id = e.target.id;//得到div的id
            var box = document.getElementById(id);//通過id得到div
            var file = e.dataTransfer.files[0];//得到檔案
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);//將file讀為url
            fileReader.onload = function (ev) {//為div新增一個圖片，圖片路徑為拖拽的檔案路徑
                var img = document.createElement("img");
                img.src = fileReader.result;
                box.appendChild(img);
            }
            // 拖拽圖片上傳
            let filelist2 = event.dataTransfer.files;
            let formData = new FormData();
            // // 通過迴圈結構將拖放形成的FileList物件中的File物件,依次
            // // 新增到FormData中
            for (let n = 0; n < filelist2.length; n++) {
                formData.append('upload', filelist2.item(n));
            }
            console.log(formData)
            // 將FormData物件提交到WEB伺服器
            axios.post('http://127.0.0.1:3000/upload', formData);
        }
    </script>
</body>

</html>

js圖片拖拽系列3----拖拽本地圖片並上傳

技術標籤：圖片處理jshtml5csshtml js圖片拖拽系列3----拖拽本地圖片並上傳 <!DOCTYPE html>

Docker 實戰（3）- 搭建 Gitlab 容器並上傳本地專案程式碼

如果你還想從頭學起 Docker，可以看看這個系列的文章哦！ https://www.cnblogs.com/poloyy/category/1870863.html

Android 拍照選擇圖片並上傳功能的實現思路(包含許可權動態獲取)

作為一個Android新手，想實現手機拍照並上傳的功能，經過查詢資料，已實現此功能。在此記錄備忘。老鳥請忽略。

Vue 圖片壓縮並上傳至伺服器功能

本文主要講解基於 Vue + Vant ，實現移動端圖片選擇，並用 Canvas 壓縮圖片，最後上傳至伺服器。還會封裝一個工具類，方便直接呼叫。

PHP實現本地圖片轉base64格式並上傳

我們在開發系統時，處理圖片上傳是不可避免的，例如使用thinkphp的肯定很熟悉import(\"@.ORG.UploadFile\");的上傳方式，今天我們來講一個使用html5 base64上傳圖片的方法。

在vue中使用vue-cropper圖片裁剪並上傳圖片(配合ant-design-vue的upload元件)

在vue中使用vue-cropper圖片裁剪並上傳圖片思路:封裝一個對話方塊(Modal),裡面包含一個vue-cropper,用於ant-upload上傳檔案時呼叫彈出此對話方塊讓使用者編輯此圖片.裁剪完emit一個事件,然後上傳這個編輯後的圖片

關於 div 的 contenteditable 使用，placeholder 和複製圖片顯示並上傳

當使用文字編輯的時候，首先會使用textarea ,但是，這個裡面不能加入其它標籤，也就是不能富文字化。於是可以使用contenteditable

h5本地預覽上傳的圖片或視訊

通過<input id=\"input\" type=\"file\" onchange=\"changeFile()\"> 中的change事件拿到的file不能直接在本地預覽選擇的圖片或者視訊，可以通過以下兩種方式預覽本地圖片，不用上傳到伺服器就可以本地預覽。

解決方案：js檔案流、base64、Bolb、File、檔案上傳的使用

技術標籤：JavaScriptjavascript 檔案上傳獲取檔案流建立input 獲取檔案 input file MDN文件<input type=file name=file>

vue中單張圖片存為本地Base64 進行上傳

HTML部分 <input @change=\"uploadPhoto($event)\" type=\"file\" class=\"kyc-passin\"> <span style=\"color: #777A7D\">只能上傳jpg/png檔案，且不超過2MB</span>

8tupian圖片加密平臺v2.7 對圖片進行加密的網路平臺+包含三種模式上傳圖片+可二次開發修改

Typora+PicGo+OSS解決本地部落格上傳至伺服器後圖片丟失問題！

喜歡寫部落格的同學一定知道Markdown，它是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件。由於Markdown的輕量化、易讀易寫特性，並且對於圖片，圖表、數

快手：全鏈路支援蘋果 iPhone 12 系列 HDR 視訊拍攝、編輯、上傳和播放

6 月 27 日訊息近日，快手宣佈為使用者提供 HDR（高動態範圍）全鏈路體驗，使用者可在快手App內實現 HDR 視訊拍攝、編輯、上傳、播放一站式的操作。

umeditor 實現ctrl+v貼上圖片並上傳、word貼上帶圖片

專案需求可釋出文章需求涉及到富文字編輯器經過查閱我選擇了較為簡便不需要後端支援可獨立完成的tinymce框架官方文件也是相當完整雖然都是全英文但是有強大的谷歌~ 沒問題的

CMS 實現ctrl+v貼上圖片並上傳、word貼上帶圖片

由於工作需要必須將word文件內容貼上到編輯器中使用但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

富文字編輯器實現ctrl+v貼上圖片並上傳、word貼上帶圖片

js圖片拖拽系列1----圖片來回拖拽

技術標籤：圖片處理html5imgjshtml js圖片拖拽系列1----圖片來回拖拽 <!DOCTYPE html>

JS面向物件程式設計實現的拖拽功能案例詳解

本文例項講述了JS面向物件程式設計實現的拖拽功能。分享給大家供大家參考，具體如下：

js實現百度登入視窗拖拽效果

前言在我們使用百度相關的功能網頁的時候，我們要去登入賬號。但是小夥伴們有沒有關注過百度的登入視窗的拖拽效果呢？下面分享仿百度登入拖拽效果的原始碼

JS實現簡單移動端滑鼠拖拽

本文例項為大家分享了JS實現移動端滑鼠拖拽的具體程式碼，供大家參考，具體內容如下

js圖片拖拽系列3----拖拽本地圖片並上傳

相關推薦