MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交
1 html部分
<!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.9.min.js"></script>
<style>
.imageup{ width:100px; height: 36px; line-height:36px;}
.button{ width:100px; height: 50px; line-height:50px;}
</style>
</head>
<body>
<img id="headimg" src='' height="150" width="150">
<p><a href="javascript:;" class="imageup">上传图片</a> </p>
<p><button onclick="upload();" class='button'> 提交</button></p>
<script> function plusReady(){
// 弹出系统选择按钮框
mui("body").on("tap",".imageup",function(){
page.imgUp();
}) }
var page=null;
page={
imgUp:function(){
var m=this;
plus.nativeUI.actionSheet({cancel:"取消",buttons:[
{title:"拍照"},
{title:"从相册中选择"}
]}, function(e){//1 是拍照 2 从相册中选择
switch(e.index){
case 1:appendByCamera();break;
case 2:appendByGallery();break;
}
});
}
//摄像头
} // 拍照添加文件
function appendByCamera(){
plus.camera.getCamera().captureImage(function(e){
console.log(e);
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL();
document.getElementById("headimg").src = path;
//就是这里www.bcty365.com
}, function(e) {
mui.toast("读取拍照文件错误：" + e.message);
}); });
}
// 从相册添加文件
function appendByGallery(){
plus.gallery.pick(function(path){
document.getElementById("headimg").src = path; });
} //服务端接口路径
var server = "http://www.test.cn/aaa.php";
//获取图片元素
var files = document.getElementById('headimg');
// 上传文件
function upload(){
console.log(files.src);
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){ //上传完成
if(status==200){
alert("上传成功："+t.responseText);
wt.close(); //关闭等待提示按钮
}else{
alert("上传失败："+status);
wt.close();//关闭等待提示按钮
}
}
);
//添加其他参数
task.addData("name","test");
task.addFile(files.src,{key:"dddd"});
task.start();
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
} </script>
</body>
</html>
2 PHP部分：
<?php echo "<pre>"; print_r($_POST); print_r($_FILES); ?>
3 操作步骤：
上传图片-》选择拍照还是系统相册-》提交
近期有很多童鞋在做的时候遇到好多问题。在此提示你一下
1 新建APP项目。hello 5+
2 注意引入 mui.min.js和 jq ,新建这个app项目里是没有的。你需要在MUI里边复制过来。
3 最后修改 服务端提交路径。就可以测试了，
MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交的更多相关文章
- MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传
1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- swift -从相册中选择照片并上传
选择本地图片并上传是应用开发中一个比较常见的功能. 原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/det ...
- MUI 图片上传剪切预览，可选（拍照+系统相册）
整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...
- MUI(拍照+系统相册)图片上传剪切预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 从系统相册中选择GIF图片上传到服务器
-(void)assetPickerController:(ZYQAssetPickerController *)picker didFinishPickingAssets:(NSArray *)as ...
- vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
//预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-sh ...
- 纯javascript代码实现浏览器图片选择预览、旋转、批量上传
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...
随机推荐
- Java类型的生命周期
以上就是我今天没有总结学习类加载器时候对类加载器仅有的知识,虽然有个大概印象,但是还是有点模糊.今天一口气总结一下,参考文献我就不列举了.本文不生产知识,只是知识的搬运工. 静态.class文件到内存 ...
- C++实现 逆波兰表达式计算问题
C++实现 逆波兰表达式计算问题 #include <iostream> #include <string> using namespace std; class Stack ...
- 在MAC上查找和设置$JAVA_HOME
最近升级了MAC OS,装了JDK7 for mac,在这里下载JDK7 for mac,装完之后发现在默认的路径下找不到JDK7的HOME,如下所示: $ which java/usr/bin/ja ...
- iOS边练边学--UIScrollView的属性简单使用，代理的简单介绍以及内容缩放
一.什么是UIScrollView *移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也是相当有限 *当展示的内容较多,超出一个屏幕时,用户可通过滚动收拾来查看屏幕以外的内容 *普通的UI ...
- .net提供的5种request-response方法一
.net提供了三种基本方法和两种底层方法来发送http请求和接收http响应,通过这些方法,我们可以模仿在浏览器地址栏输入URL地址访问网页的方法.我们发送http请求,接收服务器返回的响应(通常就是 ...
- 更改HDFS权限
hdfs dfs -chmod -R 755 / 之前执行过这条语句,但是总是提示: 15/05/21 08:10:18 WARN util.NativeCodeLoader: Unable to l ...
- TensorFlow基础笔记(13) Mobilenet训练测试mnist数据
主要是四个文件 mnist_train.py #coding: utf-8 import os import tensorflow as tf from tensorflow.examples.tut ...
- javascript中字符串拼接详解
字符串拼接是所有程序设计语言都需要的操作.当拼接结果较长时,如何保证效率就成为一个很重要的问题.本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看. 最近在研究<jav ...
- 一种是CI(Constructor Injection)构造方法注入，另一种是SI(Set Injection) set 注入
一:这里先说一下DI(Dependency Injection)依赖注入有种表现形式:一种是CI(Constructor Injection)构造方法注入,另一种是SI(Set Injection) ...
- nodejs基础 -- NPM 使用介绍
npm:是nodejs的包管理工具,随NodeJS一起安装的,能解决NodeJS代码部署上的很多问题,如: 1.允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2.允许用户从NPM服务器下载 ...