spring boot 项目，实现了点击按钮上传文件，以及拖拽文件上传，限制上传文件的类型，上传文件后再页面展示文件，并且显示文件源大小，源分辨率，文件名称，点击展示的图片，放大显示

默认效果图:

上传文件后：

点击图片放大：

上源码

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<link rel="shortcut icon" th:href="@{/ico/favicon.ico}" type="image/x-icon" />
<link th:href="@{/css/index.css}" rel="stylesheet" type="text/css">
<script th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script><body style="background-color: #e6e6e6e6"><div class="main"><form id="saveForm" name="saveForm" enctype="multipart/form-data"><div class="top_cl"><!-- 拖拽图片到这来 --><div class="col-md-5 col-md-offset-1 up-content  dragFile"><p style="margin-top:10px;">拖拽图片到这里哟</p><div class="up-area"><input class = "uploadBtn" type="button" value="点击上传" onclick="uploadFile()"><input style="display: none" type="file" accept="image/*" name="file" id="file" onchange="xmTanUploadImg(this.files)" multiple></div></div></form><div class="fileDivClass" style="display: none" id="imageUl"><ul class="ulCls"></ul></div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div></div>
</body>
<script th:src="@{/image/index.js}"></script></html>

//拖拽上传文件 在页面进行预览 上传form用到ajaxconst dragbox = document.querySelector('.dragFile');//拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)dragbox.addEventListener('dragover', function (e) {$(".up-area").css({"border":"5px dashed #ccc"});e.preventDefault(); // 必须阻止默认事件}, false);//拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围dragbox.addEventListener('dragleave', function (e) {$(".up-area").css({"border":"2px dashed #ccc"});e.preventDefault(); // 必须阻止默认事件}, false);//拖放的目标元素，其他元素被拖放到本元素中dragbox.addEventListener('drop', function (e) {e.preventDefault(); // 阻止默认事件let files = e.dataTransfer.files; //获取文件// 将拖拽的图片显示在页面xmTanUploadImg(files)// code}, false);

let idNum = 0;
function xmTanUploadImg(files){if(files.length){$("#imageUl").show();for (let i = 0; i < files.length; i++) {let file = files[i];//限制 上传类型为图片类型if(file.type.indexOf("image") != -1){let fbl = 0;let html = "";let name = file.name;//图片名称if(name.length>16){//名称长度大于16位，重新赋值显示页面let q_name = name.substring(0,9);let h_name = name.substring(name.length-3);name = q_name + "..." + h_name;}let url = window.URL || window.webkitURL;let img = new Image();              //手动创建一个Image对象img.src = url.createObjectURL(file);//创建Image的对象的urlimg.onload = function () {          //onload 加载完成后触发//拼接显示fbl = this.height+"x"+this.width;html += '<li>';html += '<div class="ul_Div_top_Cls"><img class="pic" width="157" height="200" id="showImg'+idNum+'" style="object-fit: cover;"></div>';html += '<div class="ul_Div_bottom_Cls"><div><span style="font-size: 14px;">'+name+'</span></div>';html += '<div><span style="float: left">'+renderSize(file.size)+'</span><span style="float: right">'+fbl+'</span></div></div>';html += '</li>';$(".ulCls").append(html);let showImg = $('#showImg'+idNum);showImg.attr('src', url.createObjectURL(file));$(".up-area").css({"border":"2px dashed #ccc"});idNum++;}}else{alert(file.name+"文件类型错误，仅支持图片文件！");return;}}let form = $("form[name=saveForm]");let options  = {url:'/image/saveFiles',type:'post',success:function(data){if(data.flag == "1"){console.log(data)alert("上传成功");}else{alert("上传失败");}}};form.ajaxSubmit(options);}
}

html 上传图片，拖拽图片，并在页面显示相关推荐

拖拽图片在Label上显示
原文:http://www.cppblog.com/biao/archive/2011/10/23/158940.html 首先看下效果,左边是没有原始Label,右侧是把图片拖动到Label上显示效 ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
Android拖拽图片的实现
拖拽图片效果的实现其实也很简单,只要对需要拖拽的图片设置一个TouchListener即可,在Listener的方法里边对图片的位置进行计算更改就可以达到效果了.具体实现如下: 1.Activity ...
jquery的sortable拖拽排序问题，在页面上多次拖拽保存顺序之后，刷新页面，排序出现紊乱
一.前言这篇博客是因为我在做完拖拽保存之后,测试多次拖拽,然后刷新页面,发现保存的顺序出来紊乱.这就很无奈了啊,打印各项数据才发现,因为保存用的是ajax的方式,所以页面上的列表序号是固定的,比如列 ...
iOS开发——仿微信图片浏览交互的实现(向下拖拽图片退出图片浏览器)
点击上方"iOS开发",选择"置顶公众号" 关键时刻,第一时间送达! DEMO的github地址:https://github.com/YYProgrammer ...
iOS开发点击查看图片详情并可缩放拖拽图片长按图片下载
由图片缩略图进入查看图片原图页面,并可对图片进行缩放(最小不小于原图,最大不大于三倍原图),长按可保存到本地相册或者查看原图. 1)缩略图页面: 2)点击查看原图页面代码部分: 1.初始化图片背景跟 ...
unity图片拖不进去_Unity UGUI实现简单拖拽图片功能
这一篇博客我们来使用 UGUI 实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui ...
Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【文字识别】OCR截图文字识别提取(无需安装)拖拽图片，打开图片，图片PDF转文字的好帮手
软件无需安装,双击打开就能用,适用于Windows 7以上平台: 具有截图文字识别,拖拽文字识别,打开文字识别,翻译文字等功能可用于图片和PDF中文字的识别提取中,电脑一切看得见的文件都可以识别,支 ...

html 上传图片，拖拽图片，并在页面显示

spring boot 项目，实现了点击按钮上传文件，以及拖拽文件上传，限制上传文件的类型，上传文件后再页面展示文件，并且显示文件源大小，源分辨率，文件名称，点击展示的图片，放大显示

html 上传图片，拖拽图片，并在页面显示相关推荐

最新文章

热门文章