原生 JS 写拖拽文件上传

最新推荐文章于 2024-02-28 13:49:27 发布
最新推荐文章于 2024-02-28 13:49:27 发布
阅读量448 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43542074/article/details/97405239
版权
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>拖拽</title> <style> *{margin:0;padding:0;box-sizing: border-box;} body{font-size: 1...
摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拖拽</title>
		<style>
			*{
   margin:0;padding:0;box-sizing: border-box;}
			body{
   font-size: 12px;position:relative;font-family: "microsoft yahei";}
			#addFile{
   display:block;margin:0 auto;text-align: center;color:#634A3B;cursor: pointer;}
			#edit,.addImg{
   position:relative;width:700px;height:320px;padding:3px;border:1px solid #d4d4d4;background: #fff;margin:50px auto 0;box-shadow:inset 0 1px  1px #d6d6d6;outline: medium;z-index:3;font-size:14px;}
			#edit>p{
   position:absolute;width:240px;height:50px;text-align:center;left: 0;top:0;right:0;bottom:0;margin:auto;border:1px dashed #ddd;font-size:1em;color:#999;display:block;line-height:50px;}

			#control{
   width:700px;margin:0 auto;height:45px;line-height:45px;background: #fff;border-width: 0 1px 1px 1px;border-style:solid;border-color:#d4d4d4;}

			#control .upload{
   position: relative;width:92px;height
最低0.47元/天 解锁文章
三宝鸭
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【JS】原生实现拖拽上传
Yomuki的博客
02-23 387
源视频 ：华峰前端工程师 <!-- * @Desc: 原生JS 实现文件/图片 拖拽效果 (移动端目前不适用) * @Author: Yomuki * @Date: 2021-02-23 12:24:27 * @LastEditors: Yomuki * @LastEditTime: 2021-02-23 21:53:19 --> <!DOCTYPE html> <html lang="en"> <head> <meta cha
ExtJS原生多文件拖动上传组件
01-31
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化选择文件列表源 initStore(files) //base64路径转文件类型 baseImgURL2File(url, type, name, id, callback) //图片压缩 imageCompress(file, callback) // 合并所有图片 mergeAllImage(files, mergeName, callback) //计算所有图片最大宽与所有高 totalImagesSize(width, height) //获取文件大小 getFileSize(size) //获取blob dataURItoBlob(dataURI) //文件排序 sortFile(sing) //上传所有文件 uploadFile() //长链接文件上传 upload(datas, i, uuid) 发送文件 sendFile(url, params, onProgress, backCall, error)
js原生实现拖拽上传文件和点击上传文件
frewtyh的博客
07-25 673
3.注意，开始清空input file上传框时用了files.outerHTML = files.outerHTML;但后续发现会影响文件删除和上传，于是就用 files.value = ''。1.公司想做一个小工具，需要编写原生的html配合后端实现一个功能，其中用到了文件的上传。2.其中系统默认的文件上传框太丑了所以需要将原生的给隐藏掉，这里贴html和css部分。利用dom的点击方法调用原生的input file方法，直接实现点击上传文间。
JS原生之文件上传系列（单文件上传_拖拽上传）
Sk22582的博客
03-16 325
第六节：实现拖拽上传。
原生html5拖拽上传文件
weixin_44707050的博客
03-30 393
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
原生JS加jQuery实现拖拽和单击上传文件
12-08
在前端开发中，拖放（Drag and Drop）和文件上传是常见的交互功能，尤其是在现代Web应用中。本文将深入探讨如何使用原生JavaScript和jQuery库来实现这两种功能。首先，我们要明白JavaScript提供了拖放API，而jQuery...
原生js上传文件（异步上传文件），工具类
05-17
原生js上传文件，图片上传做了相应的压缩，变色，尺寸修改
原生js实现表单拖拽功能
08-29
原生js实现表单拖拽功能,具有单行文本框，多行文本框，日期，单选框，多选框，下拉框，文件上传
前端页面文件拖拽上传模块js代码示例
10-19
【前端页面文件拖拽上传模块js代码示例】是一个实用的前端开发技术，它允许用户通过拖放操作在网页上上传文件。这个技术基于JavaScript，主要用于提升用户体验，简化上传流程。下面将详细介绍其中的关键知识点： 1....
原生HTML+JS上传功能，支持多图
02-20
原生js实现 点击，拖拽上传功能，需要后台接口的支持。 接口需要支持多图片文件， image[]: (binary) image[]: (binary) image[]: (binary) image[]: (binary) 同时返回 多张图片
拖拽上传文件
03-07
目前采用拖拽上传得网站有：Gmail，网易邮箱，酷盘，还有一些国外的网站，用户只要拖拽文件到指定区域就可以轻松实现文件的上传，技术难度为0，用户体验良好！
原生js实现四种拖拽效果
06-13
四种拖拽效果：只可在浏览器中拖拽；可超出浏览器拖拽；点击头部在浏览器中拖拽；点击头部可超出浏览器拖拽
原生js实现拖拽上传文件
yangyanqin2545的博客
08-24 706
原生js实现拖拽上传文件
原生JS ，文件上传--支持拖拽
最新发布
m0_64069461的博客
02-28 928
- 实际实现上传的input 并限制文件类型(不保险，因为用户可以放手放开限制，选择所有类型文件，所以需要在上传之前进行第二次验证) -->// // 阻止默认事件(与dragover事件结合，阻止拖拽文件在浏览器打开的默认行为)// // 阻止默认事件（与drop事件结合，阻止拖拽文件在浏览器打开的默认行为)// // 获取拖拽上传的文件(files是个数组 此处默认限制只能上传一个)// // 当拖拽文件在目标元素内松开时。// // 阻止事件冒泡。
ajax文件拖拽上传 预览
zhangjunguo0320的博客
06-12 403
本地上传，提前预览（图片，视频） 1.html中div标签预览显示，button标签触发上传事件。 [html] view plain copy div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此div>  button onclick="xhr
原生JS实现element-ui文件拖拽上传效果[手把手教程]
qq_45048851的博客
03-23 436
html+js实现element-ui文件上传组件
【JS】原生js实现拖拽功能基本思路
热门推荐
LZGS_4的专栏
02-05 1万+
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 onmousedown：鼠标按下事件onmousemove：鼠标移动事件onmouseup：鼠标抬起事件   拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成
拖拽上传文件原生js剖析详解
github_37360787的博客
01-10 1269
拖拽上传，异于浏览器自带的input（type = file）标签的上传方式，基于XMLHttpRequest对象实现文件的上传的方式！！！ 。 。 。 直奔主题： html:  定义拖拽上传的区域 &lt;div class="box"&gt;&lt;/div&gt; js： 基于原生XMLHttpRequest 对象发送文件 //禁止浏览器打开图片行为 //必须先禁止浏览器...
js实现拖拽文件上传
berlin的博客
01-07 1533
//拖拽文件刚到目标上 $$('#app-form').on('dragenter', function () { console.log("dragenter"); }); //拖拽在目标上，一直执行 $$('#app-form').on('dragover', function () { console.log("dragover"); $$('#app-form').css("back...
用原生js写一个文件上传
03-27
HTML代码： ```html <input type="file" id="fileInput"> <button id="uploadBtn">上传文件</button> ``` JS代码： ```javascript const fileInput = document.getElementById('fileInput'); const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => { const file = fileInput.files[0]; const formData = new FormData(); formData.append('file', file); const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log('上传成功'); } else { console.error('上传失败'); } } } }); ``` 以上代码监听了上传按钮的点击事件，获取文件输入框中的文件，使用FormData构建表单数据，使用XMLHttpRequest发送POST请求，最后根据请求状态判断上传成功或失败。注意，上传的URL需要根据实际情况修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值