apiclod中新手的都会用的图片上传

1登峰造极

已于 2023-04-10 14:07:52 修改

阅读量420

点赞数

分类专栏： html apicloud js 文章标签： javascript css html

于 2018-12-03 10:10:16 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/84749275

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

apicloud

8 篇文章 0 订阅

订阅专栏

1
HTML部分

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>头像上传</title>
	<link rel="stylesheet" href="../../css/api.css" />
	<style type="text/css">
       		.box{
				width: 80px;
				height: 80px;
				border-radius: 100%;
				border: 1px solid #ccc;
				overflow: hidden;	
		    }
		    .box img{
		        width: 100%;
			    height: 100%;
                }
     </style>
    <head/> 
    <body>
	    <div>
	      <img src ='' id='wode'>
	    </div>
    </body>

javascript部分

<script type="text/javascript" >
	//调用摄像头或者手机相册，保证启用摄像权限，如果未开启权限，否则会报错，
	//如果需要开启权限，请假对应的判断语句
	function uploadHeadPic() {
				api.actionSheet({
						title : '上传照片',
						cancelTitle : '取消',
						buttons : ['拍照', '手机相册']
				}, function(ret, err) {
						if (ret) {
								if (ret.buttonIndex == 1) {
										api.getPicture({
												sourceType : 'camera',
												encodingType : 'jpg',
												mediaValue : 'pic',
												destinationType : 'url',
												allowEdit : false,
												quality : 100,
												saveToPhotoAlbum : false
										}, function(ret, err) {
												//  alert(JSON.stringify(ret));
												if (ret) {
														saveImg(ret.data);
												} else {
														api.toast({
																msg : '图像获取失败',
																duration : 3000,
																location : 'bottom'
														});
												}
										});
								} else if (ret.buttonIndex == 2) {
										//手机相册选图片
										api.getPicture({
												sourceType : 'library',
												encodingType : 'png',
												mediaValue : 'pic',
												destinationType : 'url',
												allowEdit : true,
												quality : 100,
												preview:true,
												saveToPhotoAlbum : false
										}, function(ret, err) {
											//返回选择或者拍摄后的路径
												//  alert(JSON.stringify(ret.data));
												if (ret) {
													saveImg(ret.data);
												} else {
														api.toast({
																msg : '图像获取失败',
																duration : 3000,
																location : 'bottom'
														});
												}
										});
								}
						}
				});
		};
		//保存剪辑图像
	 function saveImg(path) {
				api.showProgress({
						title: '上传中...',
						text: '先喝杯茶...',
				});
				//上传剪辑后的图像到服务器
				api.ajax({
						// report : false,
						url : uploadImageUrl,
						method : 'post',
						cache : 'false',
						timeout : 30,
						dataTpye : 'json',
						data : {
								files : {
										file : path
								}
						}
				}, function(ret, err) {
					//服务器返回上传后的回调信息，
					 	   //alert(JSON.stringify(ret));
					    	api.hideProgress();
								//这里根据不同的例子来做不同的调整
								//获取到img节点，并且将src替换，
					  		var element = document.getElementById('wode');
								//我这里后端返回的数据，图片字段就是ok
                            element.src =  ret.ok;
				});
		};
</script>

1登峰造极

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
apiclod中新手的都会用的图片上传

1HTML部分&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="format-detection" content="telephone=no" /&gt; &lt;meta name="viewport&qu
复制链接

扫一扫