uniappH5端原生DOM实现除图片外,其他文件的上传

本文介绍了在uniapp中如何实现H5端除图片外的其他文件上传,如zip、rar等。官方API不直接支持,但提供了通过web-view组件、input元素、xhr或uni.uploadFile等方法实现。文章主要聚焦于H5端,通过js创建input元素选择文件,并使用xhr进行上传。
摘要由CSDN通过智能技术生成

在uniapp中,提供了uni.chooseImage和uni.uploadFile接口,我们很容易的就可以实现图片的上传,还可以预览。不过要上传其他文件,比如zip,rar等文件,官方的api就不支持了。不过官方提供了几种方法供参考来实现传其他文件。

1、通用方法:使用 web-view 组件,在 web-view 组件内可以使用 input 元素进行选择,使用表单或者 xhr 上传。
2、App 端:使用 plus.gallery.pick 选择上传(上传可继续使用 uni.uploadFile),如果对 5+API 不熟悉建议使用通用方法。
3、H5 端:使用 js 创建 input 元素进行选择,使用 xhr 上传(或者转 base64、Object-URL 使用 uni.uploadFile 上传),如果对 dom 不熟悉建议使用通用方法。

下面来介绍下H5端实现其他文件上传:

上传组件
 

<template>
	<view class="con" ref="fileInput">		
	</view>
</template>


<script>
import {token} from '@/libs/token'
import dokey from '../../common/js/secret
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您介绍一下无缝轮播的原生 DOM 实现方法。 首先,我们需要准备一个包含轮播图片的容器,设置容器的宽度为图片宽度的总和,高度为图片高度。然后,我们需要在容器内创建两个相同的图片列表,每个列表中包含所有的轮播图片。 接着,我们需要使用 JavaScript 实现轮播效果。具体实现步骤如下: 1. 获取容器和图片列表元素,并设置容器的初始位置为 0。 ``` var container = document.getElementById('container'); var list = document.getElementById('list'); container.style.left = '0px'; ``` 2. 创建自动轮播函数,使用定时器实现自动轮播。每次轮播时,将容器的位置向左移动一张图片的距离。如果当前位置已经到达最后一张图片,需要将容器的位置重置为第一张图片的位置。 ``` var timer = setInterval(function() { var left = parseInt(container.style.left) - imgWidth; if (left < -imgWidth * imgCount) { left = 0; } container.style.left = left + 'px'; }, 3000); ``` 3. 创建手动轮播函数,监听容器的鼠标事件,当鼠标按下时停止自动轮播,当鼠标抬起时重新启动自动轮播。 ``` container.onmousedown = function(event) { clearInterval(timer); var disX = event.clientX - container.offsetLeft; document.onmousemove = function(event) { var left = event.clientX - disX; if (left > 0) { left = 0; } else if (left < -imgWidth * imgCount) { left = -imgWidth * imgCount; } container.style.left = left + 'px'; } document.onmouseup = function(event) { document.onmousemove = null; document.onmouseup = null; timer = setInterval(autoPlay, 3000); } } ``` 这样,我们就完成了无缝轮播的原生 DOM 实现。希望这个答案能够对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值