mui实现压缩手机本地图片并上传

最新推荐文章于 2022-04-16 17:43:52 发布
最新推荐文章于 2022-04-16 17:43:52 发布
阅读量1.4k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linchack/article/details/85052947
版权
本文介绍如何利用mui的upload.js组件，实现对手机本地图片的压缩处理，并完成图片的上传操作，适用于移动端开发。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="js/mui.min.js"></script>  
        
        <script src="js/jquery-1.8.3.min.js"></script>  
        <style>  
            .imageup{ width:100px; height: 36px; line-height:36px;}  
            .button{  width:100px; height: 50px; line-height:50px;}  
        </style>  
    </head>  
    <body> 
    	<div align="center" style="margin-top: 80px;">
    		<img id="uploadImg" src='images/60x60.gif'  height="800px"  width="800px">
    		<br /><br />
            <h3><a href="javascript:;" class="mui-upload">上传图片</a></h3>
            <br /><br />
            <button onclick="UploadImages();" class='mui-btn-primary' style="width: 80px;">提交</button>
            &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="Refresh();" class='mui-btn-primary' style="width: 80px;">刷新</button>
            &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="getLocation();" class='mui-btn-primary' style="width: 80px;">定位</button>
    	</div>
        
        <script src="js/mui.upload.js"></script>
        <script>
        	function Refresh(){
        		document.getElementById("uploadImg").src = 'images/60x60.gif';
最低0.47元/天 解锁文章
砖1⃣️的渣男
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mui图片上传和压缩
02-23
mui图片上传、mui图片压缩的示例，附运行效果图和源码，你值得拥有！！！
MUI多图片压缩上传，很简单实现，不用递归阻塞
Wudide_xiaobai的博客
05-31 965
这段时间我负责的一个项目要用到移动端，不复杂，所以就选择了容易上手的mui，里边有大量的图片上传，一开始没有做压缩，但是考虑到网络和服务器最后还是做了压缩，一开始看到的博客都是单图片压缩，多图片压缩都是递归和阻塞来强制一张一张图片来压缩，在偶尔的情况下我想到了一个巧妙的方法。 废话不多说直接上代码（因为时间关系，代码格式有点乱，先这样后期有空再改） 前端部分： 拍照压缩： openCam...
MUI 图片上传实现
11-24 219
HTML代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>信息修改</title> <meta name="viewport" content="width=d...
mui图片压缩上传及回显（包含java后台）
06-29
带java后台的mui图片压缩上传及回显。 图片可以多选，压缩率可以自己设置。 复制过去即可使用。
mui批量图片压缩
weixin_40717107的博客
07-26 876
//图片压缩函数 function compressImage(files){      //第一次递归显示等待     if(urls.length==0)         plus.nativeUI.showWaiting("正在处理图片...", {             back: "none"         });     //当长度小于0时，结束递归      if(files.l...
Vue+mui实现图片的本地缓存示例代码
08-27
Vue+mui实现图片的本地缓存示例代码 ...本篇文章提供了一个使用Vue+mui实现图片的本地缓存的实例代码，代码中使用了mui框架的plus对象和Vue框架的mutations概念，演示了如何将图片缓存在本地，并提供了错误处理机制。
H5图片压缩 解决手机上传旋转问题
08-27
mui.toast('上传图片成功'); $('.show_img').append("<div class='imgList'><span class='oClose'>X</span><img src="+app.fileUrl+data.url+"><input type='hidden' name='imgUrls["+count+"]' value="+data....
Dcloud+mui 压缩上传图片到服务器
weixin_30851409的博客
08-23 152
chooseImgFromAlbums选择图片 chooseImgFromPictures 拍照 changeToLocalUrl 转换成可用的路径 uploadpic.compressImg 压缩图片 uploadpic.avatar 上传图片到oss服务器 /** * 上传图片 */ function UPLO...
mui 开发知识 积累总结-----图片压缩上传
qq_34836433的博客
12-15 6426
转载自：http://www.jianshu.com/p/61fc0fc8e3af 一、首先这是HTML的代码 显示一张图片 "my_img_id" class="my_img_class" src="../images/example.png"/> 二、然后这是JavaScript代码 //点击添加图片 img_my.addEventListener('tap',
mui图片裁切（拍照、从相册）上传源码实现，含Java后台，兼容安卓和ios
06-28
mui图片裁切（拍照、从相册）上传源码实现，含Java后台，兼容安卓和ios mui,图片裁切,拍照上传,从相册上传,含后台,源码 你值得拥有，使用mui+jquery.cropper插件做的
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传
11-22
利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。Storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。 --------------------- 作者：A_山水子农 来源：CSDN 原文：https://blog.csdn.net/qq_27626333/article/details/51896616 版权声明：本文为博主原创文章，转载请附上博文链接！
mui的压缩后js
02-14
追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
完整版mui.rar
10-23
最接近原生APP体验的高性能前端框架鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件
MUI图片上传+JAVA源码.zip
10-07
这是我工作研发APP使用到的MUI图片上传，前台+后台JAVA源码，供参考。
html5文件和图片上传实例java版
06-17
实例使用了html5上传文件和图片(包括图片的预览等),这里实现的是java版。
mui 图片上传，压缩，保存到相册
Runing_snailLBNL的博客
08-31 966
也是同事问我，说你这拍照上传有一个问题，相册里没有这些图片，想找到太难了，想了想算了，那就再保存到相册一份吧。是否压缩图片我增加了“是否上传原图” 按钮，也是考虑网络问题。将代码贴出来共享，^_^^_^ //获取照片方式 拍照或者文件选择 /**  *   * @param {Object} title    actionSheet头部  * @param {Object} callback ...
基于MUI 拍照以及照片上传包含压缩处理
11-13 517
/** * 调用摄像头以及图片上传 */ var TakePhoto={ //点击拍照按钮或者图片区域 MakePhoto:function(parameter){ if (mui.os.plus) { var a = [{ title: "拍照",type:"make" }, { title: "从手机相册选择" ,type:"Choose.
MUI使用base64图片上传
qq_46227568的博客
04-16 242
MUI使用base64图片上传
mui ajax 文件上传,MUI的图片上传和压缩
weixin_39779537的博客
08-06 1492
MUI的上传图片目前知道有两种方式，一种见前面文章中关于图片裁切时使用的base64作为字符串上传，另外一种则是本篇章中所使用的plus.uploader方式，它是一种真正意义上的文件上传，我们可以使用commons- fileupload组件来实现一个文件上传的后台，使用plus.uploader选择相册图片进行提交上传，详细如下文。本文章实现的特点：(1)、基于Java的服务端文件上传，可同时...
mui php上传图片,mui ajax图片上传
最新发布
05-14
以下是一个使用 MUI 和 PHP 实现图片上传的示例代码： HTML： ```html <form id="image-form"> <input type="file" name="image" id="image-input"> <button type="submit" id="upload-btn">上传</button> </form> ``` JavaScript： ```javascript mui('#upload-btn').on('tap', function() { var formData = new FormData(); formData.append('image', document.getElementById('image-input').files[0]); mui.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { console.log(data); // 处理上传成功后的操作 }, error: function(xhr, status, error) { console.log(error); // 处理上传失败后的操作 } }); }); ``` PHP： ```php if ($_FILES['image']['error'] === UPLOAD_ERR_OK) { $tempFile = $_FILES['image']['tmp_name']; $targetPath = './uploads/'; $targetName = uniqid() . '_' . $_FILES['image']['name']; $targetFile = $targetPath . $targetName; if (move_uploaded_file($tempFile, $targetFile)) { echo '上传成功'; } else { echo '上传失败'; } } else { echo '上传失败'; } ``` 以上代码实现了一个简单的图片上传功能，当用户选择图片并点击上传按钮时，会通过 AJAX 将图片数据发送到后端 PHP 文件，PHP 文件接收到图片数据后将其保存到服务器上的指定文件夹中，并返回上传结果给前端。你可以根据自己的需求对代码进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值