【H5移动端】用你的手机去访问电脑上的本地html文件(亲测有效!!前端小白福音)


废话不多说,直接开整!

网络环境

首先你的手机要和电脑是在同一个局域网,例如手机和电脑连接同一个wifi,此次举例我是笔记本电脑连接我的手机热点,也是同属一个局域网下。

http协议服务

然后我们需要在电脑安装个http协议服务,就用http-server,我们通过cmd用npm的下载安装方式(如果是第一次见npm的小白,需要安装node环境哦,去百度安装一下)

npm install http-server -g

注意:然后通过cmd进入到你放html文件的文件夹内,通过http-server指令开启服务,cmd就会提示:

例如我的,第一个就是你手机可以访问的内网地址,第二个是你电脑的回环地址。

PS:按快捷键CTRL+C可以关闭服务

关闭指定端口的防火墙

别急啊,现在你的手机还是访问不了。打开你的防火墙设置–高级设置

新建个入站规则:

这里开放和http-server服务里一样的端口,例如我的是8080

名字随便取:

同样的操作,给出站的创建一个:

这样,8080端口就被完全打开了。

手机访问

好了,手机怎么访问,先看你的文件夹,例如我的啊。
在这里插入图片描述
当我在手机浏览器输入http-server服务给我开的172.20.10.4:8080后,默认访问的是index.html文件,如果你想访问其他文件,例如css效果测试,应该这样172.20.10.4:8080/css效果测试,就可以访问了。

每次修改完html文件后,手机浏览器页面要刷新一下才会更新哦。

IOS调试工具

在知乎发现个app调试工具,不过好像目前只有ios版的,在app store搜DebugAnywhere,下载。

打开,输入网址后点击debug:

目前版本好像不能刷新后更新。

如果成功的话请给个赞呀,谢谢!

  • 5
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
H5移动端上传文件的方法有多种。根据引用\[1\]和引用\[2\]的内容,可以使用以下方法进行文件上传: 1. 使用input标签和FormData:可以通过创建一个input标签,并设置其type为"file",然后监听其change事件,在事件回调函数中获取选中的文件,并使用FormData对象将文件数据进行封装,最后通过Ajax或fetch等方式将FormData发送到服务器进行上传。 2. 使用uni-app官方内部方法:在uni-app中,可以使用uni.chooseFile方法选择文件进行上传。对于小程序端,可以使用wx.chooseMessageFile方法。而在移动端,可以使用web-view组件,并在其中使用input元素的type为"file"来实现文件上传。这种方法支持上传所有类型的文件,可以通过设置input元素的accept属性来限制上传的文件类型。 3. 文件访问转换为base64并封装为FormData:根据引用\[3\]的内容,可以使用plus.io.resolveLocalFileSystemURL方法获取文件对象,然后使用plus.io.FileReader将文件转换为base64格式。接着,将base64字符串转换为blob格式的File对象,并将其封装在FormData中进行上传。 需要注意的是,以上方法都需要在移动端环境中进行测试和调试,以确保其正常工作。同时,还需要根据具体的需求和平台特性进行适配和调整。 #### 引用[.reference_title] - *1* *3* [H5移动端(不用input)上传多个文件到服务器](https://blog.csdn.net/Zmj_Dns/article/details/83348241)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值