利用WeX5平台实现单图片上传功能

最新推荐文章于 2021-02-22 08:46:28 发布
置顶 最新推荐文章于 2021-02-22 08:46:28 发布
阅读量8.6k 收藏 11
点赞数 2
分类专栏： JavaScript WeX5 技术篇 Jquery 文章标签： wex5 app 上传图片 cordova javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sxuehua/article/details/53303175
版权
本文分享了如何在WeX5平台上开发单图片上传功能的详细步骤，涉及调用Cordova插件进行拍照，上传图片到服务器，并在手机APP中展示。关键代码包括JS上传逻辑，强调了手机端需安装APP才能调用插件，并预告了多图片上传的后续教程。
摘要由CSDN通过智能技术生成

前段时间做过基于手机app的单图片上传、多图片上传的，现在把单图片上传的案例分享给有需要的朋友，欢迎有需要的朋友评论点赞，谢谢大笑

一、效果图


二、开发思路

图片上传主要是调用cordova插件，调用拍照功能，获取照片后点击上传，上传调用服务端代码，传到服务端的盘符中即可，显示图片只需要获取到该图片的绝对路径即可。在上传的时候需要将相对路径存储到数据库中，方便图片显示的时候能够获取到绝对路径。

开发页面如下图所示：


最低0.47元/天 解锁文章
软件研发服务
关注
专栏目录
关于wex5中如何实现文件上传
CX_silent的博客
02-23 1346
继前面的甘特图之后，这次来说说wex5中如何实现简单的文件上传和删除，直接上代码 文件上传 public static JSONObject FileUpload(JSONObject params, ActionContext context) { JSONObject ret = new JSONObject(); HttpServletRequest request = (...
[分享]WeX5中input拍照上传图片方法分享，可单图与多图
iteye_6128的博客
09-06 512
  演示用，比较简陋，勿怪，方法简单！ input被点击之后默认出现拍照，文档等选项，可以拍照上传，也可以选图库文件上传，也可以录像进行视频上传，自己对应修改文件类型判断就可以了 这些功能无需调用cordova插件   如果需要使用插件拍照上传，使用java作为后端的，可以参考 http://bbs.wex5.com/forum.php?mod=viewthread&tid=9...
wex5 教程之 图文讲解 文件上传attachmentSimple（1）
chuibang3834的博客
11-08 430
视频教程地址：http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览： 1 调用attchmentSimple组件，打开文件管理器，并...
wex5 导入mysql_wex5 教程之 图文讲解 文件上传attachmentSimple（1）
weixin_33501543的博客
02-22 216
效果预览：1 调用attchmentSimple组件，打开文件管理器，并选中，显示选中照片名称 2 图片上传成功，并在img组件中预览 3 数据库写入成功，并成功被其它页面引用源码初探附件组件attachmentSimple是wex5文件上传与下载重要的处理工具。研究其源码，可以判断其实现逻辑与内置方法，便于前后端调用。源码位置： 组件样式： require('css!./css/attach...
attachmentSimple文件上传组件使用
liangyely的博客
11-28 1383
1、  添加attachmentSimple组件，必须要跟data绑定，需要data至少有一条数据，如果没有数据，则需要在加载页面的时候调用data.newData();，否则不会正确显示，官方的bug，慢慢吐血吧，官方资料没有特殊标明这点，容易忽略。 2、  actionUrl选择  /baas/justep/attachment/simpleFileStore，路径问题会比较少，如果选择$
attachmentSimple组件、cropper插件图片上传与显示
weixin_30772105的博客
03-02 183
attachmentSimple组件（多图上传） 官方案例路径：UI2->system->components->justep->attachment 添加图片 组件：attachmentSimple；data(id 字符串；image 字符串) 流程： [1]添加组件attachmentSimple，并设置属性值：bind-ref:$model.data.ref...
Wex5实现计算器
06-19
编程计算器，运算符与编程运算符功能一致，取余，移位，逻辑运算， 一个界面搞定， 博客预览：https://blog.csdn.net/qiziyiming/article/details/80736454
wex5开发平台蓝牙打印示例
03-30
总结来说，`Wex5开发平台蓝牙打印示例`是一个展示如何在`Wex5`环境下利用蓝牙功能与硬件设备（如驰腾326打印机）进行通信的实践案例。开发者需要熟悉`Wex5`的设备API，理解蓝牙设备的连接管理和数据传输过程，同时...
wex5实现时段分类
06-17
本文将深入探讨如何利用Wex5来实现时段分类功能。 时段分类是管理时间或者计划活动的一种常见方式，尤其在日程安排、资源调度或者数据分析等领域中十分有用。通过Wex5，开发者可以轻松地创建这样的功能，让用户能够...
WeX5之登录注销功能实现
Jochen_qin的博客
11-17 3582
痛苦了很久的登录、注销登录功能终于解决了，期间从论坛里看了很多帖子，也发过贴寻求大神帮助，无奈没有获得具体的方法，后来从网上一位大神的博客里找到了解决问题的关键点：http://www.cnblogs.com/fangziffff123/p/6222920.html下面将我的实现过程分享出来，希望以后像我一样的小白少走点弯路。实现思路是WeX5提供的思路：http://docs.wex5.com/...
Android开发笔记（一百五十二）H5通过WebView上传图片
aqi00的博客
01-19 2099
上一篇文章介绍了WebView与JS之间的数据交互，其实就是把字符串传来传去，这对文本格式的信息传输来说倒还凑合，倘若要传输图片信息就不管用了。所以，要想让h5网页支持从手机上传图片，还得另外想办法，当然各版本的Android系统也都提供了相应的解决办法。在Android 4.*系统上面，开发者可以重写WebChromeClient的openFileChooser函数；在Android 5.0以上
wex5iphone的系统不支持input file怎么办
丁三寿
11-07 422
之前做的wex5页面关于图片的上传裁剪，测试的时候发现在苹果手机上不能触发（但是按住在松开是可以的），进过长时间的探索终于找到了办法。 代码如下 <input type="file" value="" xid="inputImage" bind-change="file1Change" accept="image/*" style="display:none
PhoneGap 拍照并上传到远程服务器
findsafety的专栏
07-29 960
本文主要介绍如何通过PhoneGap调用摄像头拍照，并且把拍照后的图片自动发送到服务器。 处理文件上传需要服务端的支持，为了简单，我直接用了PHP，如下面的代码所示： php if ($_FILES["file"]["error"] > 0){ echo "Return Code: " . $_FILES["file"]["error"] . ""; }else{
cordova 选择图片并上传到服务器
weixin_33979745的博客
07-13 621
js navigator.camera.getPicture(function(imageURI){ var url=apiUrl+"/upload.aspx"; //alert(imageURI + "--" +url); uploadFile(imag...
cordova camera插件——摄像头插件的使用及上传图片
热门推荐
michael的博客
07-14 3万+
介绍 cordova提供照相机API与设备相机进行交互。 通过照相机API、我们可以拍摄或者访问照片库中的照片，返回图片的base64编码字符串或者图片的url文件路径。       安装插件 需要cordova 5.0以上版本 cordova plugin add cordova-plugin-camera 通过ID安装旧版本的cordova cordova plugin
Android上使用camera拍照，把获取的照片上传到远程服务器
yushulx的专栏
08-11 1416
使用Java上传文件
为什么wex5中文件下载到本地后，再打开一直出错
aoduokai的博客
05-18 1346
之前使用fileApi在线打开网络文件，出现后缀是大写（PDF、DOCX等）无法打开的情况，所以把后缀大写的文件使用cordova-plugin-file-transfer插件下载到本地，后缀改成小写，再打开。但是文件成功下载，使用第三方软件打开，一直说文件有错误，没法正常打开。 这里就要检查一下你文件下载路径的权限，可能是你的下载路径，他软件没有访问权限。 var rename = name.substr(0,name.lastIndexO
cordova 拍照上传!
Godspeed2014的博客
08-02 341
1，安装需要的插件 不管是从相册中选择图片上传，还是拍照上传。我们都需要如下先安装如下三个插件：Camera（相机）、file（文件访问操作）、fileTransfer（文件传输）。 如果没有安装的话，先安装下： 1 2 3 cordova plugin add cordova-plugin-camera cordova plugin a...
Cordova相机插件使用
qq_41097495的博客
04-30 510
1.安装插件 cordova plugin add cordova-plugin-camera 2. 在index.html中id为app的标签中 <button id="photograph">拍照</button> <button id="getPhotograph">获取照片</button> 3. navigator.camera.get...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值