pc端拖拽圖片上傳

阿新 • • 發佈：2021-01-06

技術標籤：技術交流技術總結前端 js javascript html

<!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>
    * 
 {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    html,
    body {
      padding: 10px;
    }

    #area {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="area">將圖片拖拽到此區域</div> 

  <div id="preview"></div>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    // 禁止瀏覽器預設事件 - 非常重要
    $(document).on({
      dragleave: function (e) {      //拖離
        e.preventDefault();
      },
      drop: function 
 (e) {           //拖後放
        e.preventDefault();
      },
      dragenter: function (e) {      //拖進
        e.preventDefault();
      },
      dragover: function (e) {       //拖來拖去
        e.preventDefault();
      }
    });

    var box = document.getElementById('area'); //拖拽區域
    box.addEventListener("drop", function (e) {
      e.preventDefault(); //取消預設瀏覽器拖拽效果
      var fileList = e.dataTransfer.files; //獲取檔案物件

      //檢測是否是拖拽檔案到頁面的操作
      if (fileList.length == 0) {
        alert('不是圖片')
        return false;
      }

      //檢測檔案是不是圖片
      if (fileList[0].type.indexOf('image') === -1) {
        alert("您拖的不是圖片！");
        return false;
      }

      //拖拉圖片到瀏覽器，可以實現預覽功能
      var imgurl = window.webkitURL.createObjectURL(fileList[0]);
      var filename = fileList[0].name; //圖片名稱
      var filesize = Math.floor((fileList[0].size) / 1024);
      console.log(fileList[0])

      if (filesize > 2048) {
        alert("上傳大小不能超過2M.");
        return false;
      }

      let img = document.createElement('img')
      img.src = imgurl;
      document.querySelector('#preview').appendChild(img)
	
	 // 上傳伺服器邏輯自己寫
    }, false);
  </script>
</body>

</html>

pc端拖拽圖片上傳

技術標籤：技術交流技術總結前端jsjavascripthtml <!DOCTYPE html> <html lang="en">

Java後端SSM框架圖片上傳功能實現方法解析

一、技術概述（1）這個技術是做什麼這個技術是上傳圖片到伺服器上，並且把地址存在資料庫中。前端呼叫的時候之間通過地址即可呼叫。

Java後端SSM框架圖片上傳功能

這個作業屬於哪個課程 2021春軟體工程實踐|S班（福州大學）這個作業要求在哪裡

基於Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能

用Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能圖片上傳圖片壓縮拖拽排序、拖拽刪除

圖片上傳外掛ImgUploadJS：用HTML5 File API 實現截圖貼上上傳、拖拽上傳

一 . 背景及效果當前網際網路上傳檔案最多的就是圖片檔案了，但是傳統web圖片的截圖上傳需要：截圖儲存->選擇路徑->儲存後再點選上傳->選擇路徑->上傳->插入。

[python][flask] Flask 圖片上傳與下載例子（支援漂亮的拖拽上傳）

目錄 1、效果預覽 2、新增邏輯概覽 3、tuchuang.py 邏輯介紹 3.1 圖片上傳 3.2 圖片合法檢查

javascript實現移動端 HTML5 圖片上傳預覽和壓縮功能示例

本文例項講述了javascript實現移動端 HTML5 圖片上傳預覽和壓縮功能。分享給大家供大家參考，具體如下：

jQuery實現移動端圖片上傳預覽元件的方法分析

本文例項講述了jQuery實現移動端圖片上傳預覽元件的方法。分享給大家供大家參考，具體如下：

vue+springboot前後端分離整合ueditor，避坑之圖片上傳出錯、無法回顯

1.前端vue搭建首先不管vue-cli 2.0還是vue-cli 3.0你得會新建一個vue腳手架專案，讓它能夠正常執行起來

移動端圖片上傳功能

html程式碼 <div class=\"main\" id=\"sctp\"> <div class=\"upload-content\"> <h3>上傳圖片</h3>

uniapp 使用uview框架完成圖片上傳，後端Thinkphp5.1

剛開始遇到了很多坑，為了避免大家踩坑，直接上程式碼：　　template <u-upload

element前端圖片上傳以及後端儲存

技術標籤：vue.jsjava element前端圖片上傳以及後端儲存前端程式碼後端程式碼前端程式碼

上傳圖片到伺服器加回顯之前後端程式碼實現？上傳圖片 (篇一)

技術標籤：工作BUG html新增圖片介面程式碼如下: 效果圖展示前端程式碼 <!DOCTYPE HTML>

vue3.0+TS+egg 前後端實現圖片上傳功能

技術標籤：vue 上效果圖 upload.vue （樣式是boostrap，不必要太在意樣式，可以自己寫）

基於Java後端圖片上傳程式碼編寫以及前端uniapp圖片上傳頁面編寫（效果已實現）

springBoot圖片上傳程式碼如下： 1 package com.example.xunfei.controller; 2 3 4 import com.example.xunfei.config.uploadImgUtil;

圖片上傳後端邏輯程式碼

邏輯：前端上傳圖片調後端介面，後端上傳成功後返回一個路徑，再把這個路徑放在標籤裡，最後一起儲存入資料庫。其中生成的UUID是為了上傳照片解決重名的問題/*** 圖片上傳* @param file* @param request* @param re

若依前後端分離 Vue el-upload單圖片上傳

參考於：原文連結：https://blog.csdn.net/qq_42751248/article/details/107326737 一、前端相關：

vue-quill-editor富文字編輯器使用（帶圖片上傳至七牛雲，後端為django）

vue-quill-editor富文字編輯器使用（帶圖片上傳至七牛雲，後端為django） 1.安裝vue-quill-editor

Java微信小程式oss圖片上傳的實現方法

先將圖片上傳到伺服器，再將伺服器上的圖片傳入oss中小程式js //啟動上傳等待中...

如何解決SpringBoot整合百度UEditor圖片上傳後直接訪問404

SpringBoot專案上傳圖片一般是上傳至遠端伺服器儲存，開發過程中可能會上傳至當前專案的某個靜態目錄中，此時就會遇到這個問題，檔案在上傳之後直接訪問並不能被訪問到，必須重新載入專案。