H5--文件上传(显示文件)

 

需求:上传照片后,在文件上传控件下方显示已经上传的图片文件

	<form action="">
	文件:<input type="file" name="myFile" id="myFile" onchange="getFile()" value="" /><br>
		<input type="submit" name=""/>
		<div><img src="" id="img"/></div>
	</form>



	function getFile(){
		
		var reader=new FileReader();
		var file=document.querySelector('#myFile').files;
		console.log(file);
		reader.readAsDataURL(file[0]);
		reader.onload=function(){
			console.log(reader.result);
			document.querySelector("#img").src=reader.result;
		}
		
	}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在uni-app中实现小程序上传大文件的方法可以使用文件切片上传的方式。首先,需要明确需求和方案,然后可以开始动手了。大文件上传的难点之一是实现断点续传。具体的实现方法是使用uni-app官方内部方法uni.chooseFile来实现H5端的上传,而在小程序端,由于不能使用本地HTML,可以使用uni-app官方内部方法wx.chooseMessageFile。在移动端,可以使用web-view组件,并在该组件内使用input元素的type="file"来实现上传。目前,该方法支持上传各种类型的文件,如图片、视频、文件等。如果只想上传单个类型的文件,比如只上传图片或者视频或者某个特定类型的文件,可以参考input的accept属性。切片上传大文件是最复杂的部分之一,需要将文件切割成多个片段并进行上传。关于具体的切片上传实现方式,可以参考uniapp文档以及微信官方文档中关于FileSystemManager的部分。在实现断点续传时,需要注意一些细节。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp 微信小程序 分片 断点续传 大文件上传](https://blog.csdn.net/qq_34157798/article/details/119324994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [uniApp移动端-H5-微信小程序上传文件(图片,文档和视频等)](https://blog.csdn.net/weixin_45145119/article/details/130581411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶人超有料

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值