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 单个图片上传预览(拍照+系统相册):先选择->预览->上传提交的更多相关文章

  1. MUI 单图片压缩上传(拍照+系统相册): 选择立即上传

    1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. swift -从相册中选择照片并上传

    选择本地图片并上传是应用开发中一个比较常见的功能.        原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/det ...

  3. MUI 图片上传剪切预览,可选(拍照+系统相册)

    整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...

  4. MUI(拍照+系统相册)图片上传剪切预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 从系统相册中选择GIF图片上传到服务器

    -(void)assetPickerController:(ZYQAssetPickerController *)picker didFinishPickingAssets:(NSArray *)as ...

  6. vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决:

    //预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-sh ...

  7. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  8. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  9. 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切

    之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...

随机推荐

  1. Jackson2.1.4 序列化格式化时间

    public class User { private int id; private Date birthday; private double money; private String name ...

  2. Android——用对话框做登陆界面(自定义对话框AlertDialog,多线程,进度条ProgressDialog,ListView,GridView,SharedPreferences存,读数据,存取文本,assets文件)

    效果: 1.点击图标进入页面二 2.页面2图片暂停显示5秒进入页面三 3.点击页面三登陆按钮,打开登陆对话框,输入密码进入页面四 点击下载按钮,显示水平进度条 点击保存和获取用户名和密码 进入页面六  ...

  3. FastDFS-单机版安装

    转载自: 搭建单机版的FastDFS服务器 * 为了便于理解,其中顺序有改变. 1.第八步创建软链接,可以等到第九步结束后进行.如果提前在第八步创建软链接,因为还没有安装 libfdfsclient. ...

  4. css鼠标移动到文字上怎样变化背景颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【转】记一次ASP.NET MVC性能优化(实际项目中)

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  6. ajax等待(比较慢时)(显示图片)

    html页面 <div style="display:none;" id="loading-mask"></div> <div i ...

  7. Session超时问题(AOP 过滤器)

    public class TimeoutAttribute : ActionFilterAttribute { public override void OnActionExecuting(Actio ...

  8. u3d调用c++ dll的DllNotFoundExceion 问题

    原文地址:http://blog.csdn.net/boren31/article/details/8778504 问题年年有,今年特别多. 开发环境: Windows  XP sp3 Visual  ...

  9. iOS开发- UILabel 自己主动换行 及 高度自适应

    主要是今天看到论坛有人问这个问题.帮忙解决之后, 顺便Mark下. 非常easy, 代码写的非常清楚. 直接上代码. UILabel *label = [[UILabel alloc] initWit ...

  10. RGB 颜色对照表

    R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41 36 ...