js 实现文件上传样式详情
目录
- 1、概述
- 2、创建对象的参数
- 3、监听例子
- 4、使用方法
- 5、源代码
1、概述
这个js包括按钮样式，列表样式、带有删除、添加、放大（使用的是自带的放大功能，提供有API来放入你的弹窗来进行展示）
| 可监听的事件 | Value | wdaasd |
|---|---|---|
| onlargeClickCallBack | 如果想使用自己的弹窗，只需要监听这个函数，拿到返回值给你的弹窗的img->href进行赋值即可 | imgFile对象（包括这个被点击图片的全部信息）that（这个js的全局唯一对象，可以在这里面拿到你所有的值） |
| ondialogBeforeClose | 自带的弹窗被关闭的回调 | object 返回值是一个对象 对象.event -> 被执行的事件的源事件 对象.imgFile -> 被点击关闭弹窗时，目前弹窗上展示的图片对象信息 |
| onaddImgList | 每添加一个图片的回调 | file -> 文件对象 that -> （这个js的全局唯一对象，可以在这里面拿到你所有的值） |
2、创建对象的参数
| 参数 | 含义 |
|---|---|
| maxFileLength | 最大可以存在的文件个数 默认值：2 |
| maxFileSize | 每个文件单独最大的文件大小 默认值：1024 （1M） |
| fileSuffix | 允许上传的文件后缀 默认值：['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'] |
| StopDialog | 是否阻止打开自带的默认弹窗 默认值：false |
| shadeDialogStyle | 如果打开自带弹窗的选项，那么这个控制打开的弹窗高宽多少默认值：[null, null],默认为null为自适应，如果想要设置百分比和px 请直接改变数组[0,1]，数组第一项代表宽，第二项代表高 |
| showBtnImgStyle | 是否开启按钮样式 默认值：false |
使用代码示例：
<div class="hj-file">
<input type="file" file="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<!-- 在不开启按钮样式时，这个外层div可以删除 -->
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
选择图片
</div>
</div>
<!-- 文件信息列表 -->
<div class="hj-file-list">
</div>
</div>
var file = new File({
maxFileLength: 2,
maxFileSize: 1024,
fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn: false
});
initHJFile(file);
3、监听例子
//如果不想使用自带的弹窗，可以选择监听file对象的onlargeClickCallBack函数
file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = function (event) {}
file.callBack.onaddImgList = function () {}
4、使用方法
项目目录如上图所示
如果要使用，只需要把js放入你的项目路径下，然后把img放到你的static目录（静态资源路径）。
这里js里面默认引入的图标是 ./ 的相对路径，请自行搜索然后进行更改为你项目的文件路径
上图项目示例为可直接打开查看的完整包，后文有下载地址
5、源代码
此源代码为不包括图标的源代码，全部在一个html页面里面
<!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">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
/* display: flex;
justify-content: center;
align-items: center; */
}
/* .box {
width: 600px;
} */
.hj-file {
width: 100%;
/* height: 100%; */
}
.hj-file-input {
display: none;
}
.hj-box {
display: flex;
flex-wrap: wrap;
}
.append-item {
width: 150px;
height: 150px;
border: 1px dashed #b1b5bb;
border-radius: 5px;
background-color: #fbfdff;
display: flex;
align-items: center;
margin: 10px;
justify-content: center;
}
.image-item {
width: 150px;
height: 150px;
border-radius: 5px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #eaedf1;
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
transition: 1s;
animation: translaters 1s;
}
.image-item-delete {
animation: bottom-translaters .7s;
}
@keyframes translaters {
0% {
opacity: .2;
transform: translate(0, -50%);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes bottom-translaters {
0% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: .2;
transform: translate(0, 50%);
}
}
.img-push img {
width: 60px;
height: 60px;
}
.append-item:hover {
border-color: #00d2fc;
}
.margin-class {
margin-bottom: 20px;
}
.first {
background-image: url('./img/66.jpg');
}
.z-index-promote {
z-index: 3;
}
.largeImg img {
cursor: pointer;
width: 30px;
height: 30px;
transition: .6s;
display: none;
}
.deleteImg img {
cursor: pointer;
width: 40px;
height: 40px;
display: none;
}
.image-item:hover::before {
content: "";
z-index: 2;
background-color: #42393999;
width: 100%;
position: absolute;
height: 100%;
border-radius: 5px;
transition: .6s;
animation: transparency linear .6s;
}
.image-item:hover .largeImg img {
display: block;
animation: transparency linear .6s;
}
.image-item:hover .deleteImg img {
display: block;
animation: transparency linear .6s;
}
@keyframes transparency {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.hj-shade {
width: 100vw;
height: 100vh;
background-color: #302d2d99;
position: fixed;
overflow: hidden;
z-index: 1978;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
animation: hj-shade-sacle .5s;
}
@keyframes hj-shade-sacle {
0% {
transform: translate(-50%, -50%) scale(0%);
}
100% {
transform: translate(-50%, -50%) scale(100%);
}
}
@keyframes hj-shade-hidden {
0% {
transform: translate(-50%, -50%) scale(100%);
}
100% {
transform: translate(-50%, -50%) scale(0%);
}
}
.hj-shade-hidden {
animation: hj-shade-hidden .5s;
}
.hj-shade {
overflow: auto;
}
.hj-shade .hj-box {
width: 60%;
height: 80%;
padding: 20px 10px 10px 10px;
background-size: 100% 100%;
background-color: white;
}
.hj-shade .hj-box .hj-img {
width: 100%;
overflow: auto;
height: 100%;
}
.hj-file-list .hj-file-list-item {
background-color: white;
color: #8cacb3;
display: flex;
line-height: 2;
font-size: 0.8em;
}
.hj-file-list .hj-file-list-item:hover {
background-color: #00d2fc70;
color: white;
}
.hj-file-list .hj-file-list-item .hj-left {
width: 30%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hj-file-list .hj-file-list-item .hj-left span {
margin-left: 20px;
cursor: pointer;
}
.hj-file-list .hj-file-list-item .hj-right {
width: 30%;
display: flex;
align-items: center;
justify-content: end;
}
.hj-file-list .hj-file-list-item .hj-right span {
margin-right: 20px;
}
.hj-file-list .hj-file-list-item .hj-right img {
width: 20px;
height: 20px;
cursor: pointer;
}
@keyframes hj-list-hidden {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.hj-list-hidden {
animation: hj-list-hidden .7s;
}
.hj-btn-box {
margin-bottom: 25px;
}
.hj-btn-box .hj-btn {
margin-left: 20px;
cursor: pointer;
background-color: #009efa;
width: 30%;
line-height: 2;
border-radius: 4px;
color: white;
font-size: 1.2em;
text-align: center;
}
.hj-hidden {
display: none;
}
</style>
<body>
<div class="box">
<div class="hj-file">
<input type="file" file="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
选择图片
</div>
</div>
<div class="hj-file-list">
</div>
</div>
</div>
<script>
// File构造函数
function File(obj) {
// 文件总个数
this.fileLength = 0;
// 文件数组
this.fileList = [];
// 对象参数配置文件
this.config = {
// 最大文件个数
maxFileLength: obj.maxFileLength || 2,
// 最大文件大小
maxFileSize: obj.maxFileSize || 1024,
// 允许的文件后缀
fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
// 是否阻止默认打开弹窗
StopDialog: obj.StopDialog || false,
// 弹窗的样式 宽 高
shadeDialogStyle: obj.shade || [null, null],
// 是否开启按钮样式
showBtnImgStyle: obj.showBtn || false,
};
// fileDom中存储的唯一的dom节点
this.dom = {
// input 文件选中输入框dom
inputDom: null,
// append-item 添加点击dom
imageItemDom: null,
// 要向hj-append-item节点后面追加图片的dom
appendItemDom: null,
// 要向hj-file-list节点后面添加图片列表的dom
appendListDom: null,
};
// 事件处理对象
this.event = {
// append-item点击事件处理
imageItemClick: () => {
this.dom.inputDom.click();
},
// input 文件选中输入框选择完图片之后事件处理
changeLoadFile: (file) => {
this.method.filterFile(file.target.files);
},
// 图片删除事件
imgDeleteClick: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
let _before = this.fileList.slice(0, index == this.fileList.length ? index - 1 :
index);
let _after = this.fileList.slice(index + 1);
_before = _before.concat(_after);
// 删除图片
this.method.deleteImg(id);
setTimeout(() => {
this.fileList[index].dom.remove();
this.fileList[index].listDom.remove();
this.fileLength--;
this.fileList = _before;
}, 600);
break;
}
}
1
},
// 图片放大事件
imgLargeClick: (id) => {
let imgFile = this.privateUtils.foreachFileListToId(id);
console.log(imgFile);
this.callBack.onlargeClickCallBack(imgFile, this);
if (this.config.StopDialog) return;
let hjShadeDiv = document.getElementsByClassName('hj-shade');
if (hjShadeDiv.length != 0) return;
let div = document.createElement('div');
div.className = 'hj-shade';
let div2 = document.createElement('div');
div2.className = 'hj-box';
let img = document.createElement('img');
img.className = 'hj-img';
img.src = imgFile.base64;
div2.appendChild(img);
div.addEventListener('click', (event) => {
this.callBack.ondialogBeforeClose({
event: event,
imgFile: imgFile,
});
div.className = div.className + ' hj-shade-hidden';
setTimeout(() => {
document.body.removeChild(div);
}, 500);
})
// 防止在按钮模式下，会出现第一次没有加载完成，高长为0的不正常情况
img.onload = () => {
div.appendChild(div2);
document.body.appendChild(div);
this.privateUtils.computeDialogWH(img, div2);
}
},
},
this.method = {
// 过滤图片
filterFile: (list) => {
for (let index = 0; index < list.length; index++) {
let size = parseInt(list[index].size / 1024);
let suffix = list[index].name.substring(list[index].name
.lastIndexOf('.') + 1);
// 是否符合后缀
let isTrue = false;
// 判断文件大小
if (size > this.config.maxFileSize) {
console.log("文件太大");
break;
}
for (let j = 0; j < this.config.fileSuffix.length; j++) {
if (suffix == this.config.fileSuffix[j]) {
isTrue = true;
break;
}
}
if (isTrue) {
let id = parseInt(Math.random() * 100000);
this.fileList.push({
id: id,
file: list[index],
base64: '',
dom: '',
listDom: '',
});
console.log(this.fileList);
this.method.streamToImgBase64(list[index], id);
} else {
console.log("文件后缀不符合");
}
}
},
// 处理图片展示
streamToImgBase64: (file, id) => {
var fileReader = new FileReader();
fileReader.onload = (data) => {
this.method.appendImage(data.target.result, id);
}
fileReader.readAsDataURL(file);
},
// 追加图片到dom节点中
appendImage: (url, id) => {
let div = document.createElement('div');
div.className = 'image-item margin-class';
div.style.backgroundImage = 'url(' + url + ')';
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
this.fileList[index].dom = div;
this.fileList[index].base64 = url;
break;
}
}
// 创建删除dom,全部使用addEventListener
let largeDom = document.createElement('div');
largeDom.className = 'largeImg z-index-promote';
largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
largeDom.addEventListener('click', () => {
this.event.imgLargeClick(id);
})
let deleteDom = document.createElement('div');
deleteDom.className = 'deleteImg z-index-promote';
deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
deleteDom.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div.appendChild(largeDom);
div.appendChild(deleteDom);
this.dom.appendItemDom.appendChild(div);
this.fileLength++;
// 添加图片列表
this.method.addImgList(id);
},
// 删除图片
deleteImg: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
let item = this.fileList[index];
let cless = item.dom.getAttribute('class');
let clessList = item.listDom.getAttribute('class');
this.fileList[index].dom.setAttribute("class", cless + " image-item-delete");
this.fileList[index].listDom.setAttribute("class", clessList + " hj-list-hidden ")
break;
}
}
},
// 添加图片列表
addImgList: (id) => {
let file = this.privateUtils.foreachFileListToId(id);
this.callBack.onaddImgList(file, this);
let div = document.createElement('div');
div.className = ' hj-file-list-item '
let div$left = document.createElement('div');
let div$right = document.createElement('div');
let file$img = document.createElement('img');
let fileSize = this.privateUtils.computeFileSize(file.file.size);
file$img.src = './img/delete-balck.png';
div$left.className = ' hj-left ';
div$right.className = ' hj-right ';
div$left.innerHTML = `<span>${file.file.name}</span>`
div$right.innerHTML = `<span>${fileSize}</span>`;
div$left.addEventListener('click', () => {
this.event.imgLargeClick(id);
})
file$img.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div$right.appendChild(file$img);
div.appendChild(div$left);
div.appendChild(div$right);
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
this.fileList[index].listDom = div;
break;
}
}
this.dom.appendListDom.appendChild(div);
},
}
// 暴露的监听Api
this.callBack = {
// 阻止默认自带的打开弹窗
onlargeClickCallBack: (img, that) => {},
// 自带的弹窗被关闭时的回调
// {event: 点击的源事件对象 imgFile: 被关闭的那张图片的全局file对象信息}
ondialogBeforeClose: (object) => {},
// 每一次添加图片列表时的回调
onaddImgList: (file, that) => {},
},
this.privateUtils = {
foreachFileListToId: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
return this.fileList[index];
}
}
},
computeFileSize: (size) => {
let result = parseInt(size / 1024);
if (result < 1024) {
return result + '.KB';
} else if (result >= 1024) {
return parseInt(result / 1024) + ".MB";
}
},
// 计算弹窗的高度和长度
computeDialogWH: (img, dom) => {
let w = this.config.shadeDialogStyle[0];
let h = this.config.shadeDialogStyle[1];
let w2 = img.naturalWidth;
let h2 = img.naturalHeight;
if (w2 > window.innerWidth * 0.9) {
w2 = window.innerWidth * 0.7;
h2 = window.innerHeight * 0.7;
}
dom.style.width = w == null ? w2 + "px" : w;
dom.style.height = h == null ? h2 + "px" : h;
}
}
}
var file = new File({
maxFileLength: 2,
maxFileSize: 1024,
fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn: false
});
initHJFile(file);
// 如果不想使用自带的弹窗，可以选择监听file对象的onlargeClickCallBack函数
file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = function (event) {}
file.callBack.onaddImgList = function () {}
// 加载初始信息，比如dom节点的添加
function initHJFile(file) {
console.log(file);
let input_dom = document.getElementsByClassName('hj-file-input')[0];
let imageItem_dom = document.getElementsByClassName('append-item')[0];
let appendItem_dom = document.getElementsByClassName('hj-append-item')[0];
let appendList_dom = document.getElementsByClassName('hj-file-list')[0];
file.dom.inputDom = input_dom;
file.dom.imageItemDom = imageItem_dom;
file.dom.appendListDom = appendList_dom;
if (file.config.showBtnImgStyle) {
// 开启按钮模式
appendItem_dom.style.display = 'none';
let btn = document.getElementsByClassName('hj-btn-box');
console.log(btn);
if (btn.length != 0) {
btn[0].className = 'hj-btn-box';
btn[0].children[0].addEventListener('click', file.event.imageItemClick);
} else {
console.log("没有找到btn Class");
throw new Error('未定义按钮模式所需的HTML')
}
}
file.dom.appendItemDom = appendItem_dom;
file.dom.imageItemDom.addEventListener('click', file.event.imageItemClick);
file.dom.inputDom.addEventListener('change', file.event.changeLoadFile)
}
</script>
</body>
</html>
到此这篇关于js 实现文件上传样式详情的文章就介绍到这了,更多相关js 实现文件上传样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS中FileReader类实现文件上传及时预览功能
FileReader是H5浏览器才支持的JS类,如果不支持H5de浏览器可以使用FormData类实现文件的上传预览,使用可以参考我的下一篇博客:JS中FormData类实现文件上传 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
-
node.js使用express-fileupload中间件实现文件上传
目录 初始化项目 编写服务器 初始化客户端 编写组件 FileUpload Message.js Progress.js 测试 本文使用express作为服务端,使用express-fileupload库提供的中间件函数来接受从客户端传来的图片,并将图片作为文件存储在服务端.客户端使用create-react-app框架,bootstrap UI,axios发送http请求和提供进度条当前进度的值,上传成功后,根据图片在服务端上的位置,并显示图片. 初始化项目 mkdir react-file-
-
JS可断点续传文件上传实现代码解析
刚开始学习前端开发就碰到文件上传问题,还要求可断点续传.查了很多资料,发现H5的file API刚好可以满足我们的需求,也遇到了一些问题,于是记录下来为有同样需求的朋友提供一些帮助. 一.首先,为了引入文件对象,需要在H5页面上放置一个file类型的输入标签. <input type="file" onchange="fileInfo()"> 当选择文件之后显示文件相关信息: function fileInfo() { let fileObj = doc
-
JS中FormData类实现文件上传
本文实例为大家分享了JS中FormData类实现文件上传的具体代码,供大家参考,具体内容如下 上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用.这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度. 案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示 <!DOCTYPE html> <html lang="en">
-
如何基于js管理大文件上传及断点续传详析
目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何
-
基于JavaScript实现大文件上传后端代码实例
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性.如MD5秒传的信息. 首先是文件数据接收逻辑,负责接收控件上传的文件块数据,然后写到服务器的文件中.控件已经提供了块的索引,大小,MD5和长度信息,我们可以根据需要来灵活进行处理,也可以将文件块的数据保存到分布式存储系统中. 文件初始化部分
-
jquery实现异步文件上传ajaxfileupload.js
本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下 ajaxfileupload.js 异步上传文件: 直接引用. 调用方法: $.ajaxFileUpload({ url:'',//后台接口地址 type: "post", secureuri: false, //一般设置为false fileElementId: 'ofx', // 上传文件的id.name属性名 dataType: 'json', success: function(data, s
-
JavaScript 使用Ckeditor+Ckfinder文件上传案例详解
目录 一.准备工作 二.解压 三.开始集成 一.准备工作 Ckeditor_4.5.7_full + Ckfinder_java_2.6.0 二.解压 1.解压ckeditor,和平常文件解压相同,正常解压即可 2.解压ckfinder,解压完成后进入ckfinder文件夹下,发现有CKFinderJava-2.6.0.war文件,继续解压. 3.注意看红框部分 三.开始集成 1.准备工作完成,将图1中的ckeditor,及图3中的ckfinder文件夹拷贝到我们自己的项目的WebContent
-
js 实现文件上传样式详情
目录 1.概述 2.创建对象的参数 3.监听例子 4.使用方法 5.源代码 1.概述 这个js包括按钮样式,列表样式.带有删除.添加.放大(使用的是自带的放大功能,提供有API来放入你的弹窗来进行展示) 可监听的事件 Value wdaasd onlargeClickCallBack 如果想使用自己的弹窗,只需要监听这个函数,拿到返回值给你的弹窗的img->href进行赋值即可 imgFile对象(包括这个被点击图片的全部信息)that(这个js的全局唯一对象,可以在这里面拿到你所有的值) on
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
-
js自定义input文件上传样式
文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢? 我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按钮上传也都没问题 先看效果: 代码贴出来: 方法1 <!-- 方法1: div : 设置宽高.overflow:hidden;超出的部分被隐藏 input : 设置层级z-index = 1;设置透明度opacity:0;设置相对定位position:relative;使两个元素重叠 i : 设置层级z
-
js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构 该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&q
-
JS多文件上传的实例代码
废话不多说了,具体实现代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <fo
-
vue+vux实现移动端文件上传样式
样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file' 就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>
-
BootStrap文件上传样式超好看【持续更新】
一 直接使用bootstrap,利用简单的js控制 http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ 非常简单,代码如下: <input id="lefile" type="file" style="display:none"> <div class="input-append"> <input id=&quo
-
Node.js实现文件上传
在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传
-
又拍云 Node.js 实现文件上传、删除功能
Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = express(); const axios = require('axios'); app.set('port', process.env.PORT || 8082); // 静态资源目录,这里放在了根目录,生产环境不允许这样 app.use(express.static(__dirname)); //
-
原生JS实现文件上传
本文实例为大家分享了JS实现文件上传的具体代码,供大家参考,具体内容如下 一.目的: 实现上传图片功能 二.效果: 三.思路: 用input标签自带的上传,先隐藏掉,给上传按钮添加点击事件,绑定input的点击事件 四.代码: //html <input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @cha