博客分类：
&!doctype html&
&html&
&meta charset="UTF-8"&
&title&更改图像&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&link href="css/mui.min.css" rel="stylesheet" /&
&link href="css/hr.css" rel="stylesheet" /&
&link& href="css/cropper.min.css" rel="stylesheet"&
&style type="text/css"&
margin-top: 10
width: 100%;
text-align:
.ctable td{
font-size: 12
padding: 5
.ctable td button{
width: 100
height: 50
font-size: 12
.choiceDiv{
text-align:
border: solid 1
margin: 10
min-height: 320
background-color: #888888;
max-width: 100%;
#choiceImg{
width: 300
height: 300
margin: 10
&header class="mui-bar mui-bar-nav"&
&&& &a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"&&/a&
&&& &h1 class="mui-title"&修改图像&/h1&
&div class="mui-content"&
&table class="ctable"&
&button type="button" class="mui-btn mui-btn-purple" id="cameraBtn"&拍照&/button&
&button type="button" class="mui-btn mui-btn-purple" id="galleryBtn"&相册&/button&
&div class="choiceDiv"&
&img id="choiceImg" /&
&table class="ctable"&
&button type="button" class="mui-btn mui-btn-grey" id="qxBtn"&旋转&/button&
&button type="button" class="mui-btn mui-btn-blue" id="preBtn"&预览&/button&
&button type="button" class="mui-btn mui-btn-danger" id="bigBtn"&确定&/button&
&div id="popover" class="mui-popover hrcenter"&
&script src="js/mui.min.js"&&/script&
&script src="js/jquery.min.js"&&/script&
&script src="js/cropper.min.js"&&/script&
&script src="js/app.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
mui.init();
mui.plusReady(function(){
var cameraBtn = document.getElementById("cameraBtn");
var galleryBtn = document.getElementById("galleryBtn");
cameraBtn.addEventListener("tap",function(){//调用系统相机
var camera = plus.camera.getCamera();
camera.captureImage(function(file){
showImage(file);
},function(error){
console.log("cameraBtn error: "+JSON.stringify(error));
},{index:'2'});
galleryBtn.addEventListener("tap",function(){
plus.gallery.pick(function(file){
showImage(file);
},function(error){
console.log("galleryBtn error: "+JSON.stringify(error));
},{ filter: 'image',multiple: false})
var choiceImg = document.getElementById("choiceImg");
var lastFile = "";
var croppedC
function showImage(file){
plus.io.resolveLocalFileSystemURL(file,function(url){
url.file(function(file){
console.log(file.size);
if(file.size&app.IMG_SIZE){
var scap = file.size&app.IMG_SIZE*2?'20%':'50%';
compressImage(url.toLocalURL(),scap);
choiceImg.src = url.toLocalURL();
console.log(url.toLocalURL());
if(lastFile && lastFile!=url.toLocalURL()){
$('#choiceImg').cropper('reset').cropper('replace', url.toLocalURL());
$('#choiceImg').cropper("getCroppedCanvas",{
& aspectRatio: 1/1,
& autoCropArea: 0.8
lastFile = url.toLocalURL();
// 压缩图片
function compressImage(src,scap){
console.log("src:"+src);
var dst = src.substr(src.lastIndexOf("."));
plus.nativeUI.showWaiting();
plus.zip.compressImage({
quality:100,
overwrite:true,
//
width:scap
width:'1000px',
height:'1000px'
function(i){
plus.nativeUI.closeWaiting();
choiceImg.src = i.
if(lastFile && lastFile != i.target){
$('#choiceImg').cropper('reset').cropper('replace', i.target);
$('#choiceImg').cropper("getCroppedCanvas",{
& aspectRatio: 1/1,
& autoCropArea: 0.8
lastFile = i.
},function(e){
plus.nativeUI.closeWaiting();
console.log("压缩图片失败: "+JSON.stringify(e));
var qxBtn = document.getElementById("qxBtn");
qxBtn.addEventListener("tap",function(){
//
mui.back();
$('#choiceImg').cropper('rotate','90');
var preBtn = document.getElementById("preBtn");
preBtn.addEventListener("tap",function(){
if(!lastFile){
croppedCanvas = $("#choiceImg").cropper('getCroppedCanvas');
var roundedCanvas = app.getRoundedCanvas(croppedCanvas);
document.getElementById("popover").innerHTML = '&img src="' + roundedCanvas.toDataURL() + '"&';
mui(".mui-popover").popover("toggle", preBtn);
var bigBtn = document.getElementById("bigBtn");
bigBtn.addEventListener("tap",function(){
croppedCanvas = $("#choiceImg").cropper('getCroppedCanvas');
var roundedCanvas = app.getRoundedCanvas(croppedCanvas);
var base64Data = roundedCanvas.toDataURL();
var params = {};
var t = lastFile.lastIndexOf(".");
var type = lastFile.substr(t);
params.account = app.getState().
params.functionName = "mobileChangeLogo";
params.baseData = base64D
params.type =
app.postHandler(params,function(result){
console.log(result.state);
app.setLogo(roundedCanvas.toDataURL());
var pcw = plus.webview.getWebviewById("setting_four.html");
pcw.evalJS("logoHandle('"+base64Data+"')");
mui.back();
服务器端servlet处理
-----------------------
/**
* 将字符串转为图片
* @param imgStr
public static boolean generateImage(String imgStr, String imgFile)
throws Exception {// 对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) // 图像数据为空
BASE64Decoder decoder = new BASE64Decoder();
// Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i & b. ++i) {
if (b[i] & 0) {// 调整异常数据
b[i] += 256;
// 生成jpeg图片
String imgFilePath = imgF// 新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
} catch (Exception e) {
下载次数: 3
浏览: 2209 次
来自: 北京
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'MUI上传图片备忘 - 胡东东博客
MUI上传图片备忘
&2586&views
Categories：
Share to：
上一篇说了用ios做了一个上传图片的demo，今天用MUI框架做了下使用js上传图片的demo，因为mui使用的JS，所以其实这个备忘也适合其他的js使用。现在说下基础的demo思路。一、设置页面图片和按钮这个是随手布局的，图片路径写的本地图片，也可以写网络链接图片，比如http://www.hudongdong.com/logo.gif&div&class=&mui-content&&
&&&&&button&type=&button&&onclick=&ssss()&&class=&mui-btn&mui-btn-blue&mui-btn-block&&上传按钮&/button&
&&&&&div&id=&imgg&&
&&&& &img&id=&hudd&&src=&13.jpg&/&
&&&& &img&id=&hudd2&&src=&14.png&/&
&&&&&/div&
&/div&二、JS将图片转换为base64编码因为服务器要的是图片的base64编码，而不是http://&链接地址，所以第一步需要将图片转换为base64编码function&getBase64Image(img)&{
&&&&&&&&var&canvas&=&document.createElement(&canvas&);
&&&&&&&&canvas.width&=&img.
&&&&&&&&canvas.height&=&img.
&&&&&&&&var&ctx&=&canvas.getContext(&2d&);
&&&&&&&&ctx.drawImage(img,&0,&0,&img.width,&img.height);
&&&&&&&&var&ext&=&img.src.substring(img.src.lastIndexOf(&.&)+1).toLowerCase();
&&&&&&&&var&dataURL&=&canvas.toDataURL(&image/&+ext);
&&&&&&&&return&dataURL;
}注意这个函数的参数img是img对象，不是img的src地址，是这么用的getBase64Image(document.getElementById(&hudd&))三、数据处理getBase64Image的到的数据格式是类似于这样的，后面的是图片的base64编码的字符串，省略下data:image/base64,iVBORw0KGgo.........因为我们服务器只要后面的字符串，不要前面的data:image/base64标志，所以需要处理下，用,分割下字符串，只用逗号后面的数据var&stt&=&getBase64Image(document.getElementById(&hudd&));
var&stt2&=&getBase64Image(document.getElementById(&hudd2&));
imgArray.push(stt);
imgArray.push(stt2);
for&(var&i&=&0;i&imgArray.i++)&{
var&strs&=&new&Array();
strs&=&imgArray[i].split(&,&);
var&imgPath&=&strs[strs.length-1];
imgArr.push(imgPath);
}把分割好的字符串专门存到imgArr这个数组中，然后把这个数组转换为json串上传到服务器即可var&imgJson&=&JSON.stringify(imgArr);四、将处理好的json串上传到服务器使用mui自己封装的上传格式，post上传到服务器即可mui.ajax(&http://adapp.jidonggame.com/upload.html&,{
&&&&'pic':imgJson
type:'post',
timeout:10000,
dataType:'json',
success:function&(data)&{
mui.alert(JSON.stringify(data));
error:function&(xhr,type,errorThrown)&{
console.log(xhr+&,&+type+&,&+errorThrown);
});五、整个文件内容上面说了思路之后，这个是整个html文件的内容，可以参考下&!DOCTYPE&html&
&&&&&meta&charset=&utf-8&&
&&&&&meta&name=&viewport&&content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&&/&
&&&&&title&&/title&
&&&&&script&src=&js/mui.min.js&&&/script&
&&&&&link&href=&css/mui.min.css&&rel=&stylesheet&/&
&&&&&script&type=&text/javascript&&charset=&utf-8&&
&&&&&& mui.init();
&&&&&/script&
&script&type=&text/javascript&&
function&getBase64Image(img)&{
&&&&&&&&var&canvas&=&document.createElement(&canvas&);
&&&&&&&&canvas.width&=&img.
&&&&&&&&canvas.height&=&img.
&&&&&&&&var&ctx&=&canvas.getContext(&2d&);
&&&&&&&&ctx.drawImage(img,&0,&0,&img.width,&img.height);
&&&&&&&&var&ext&=&img.src.substring(img.src.lastIndexOf(&.&)+1).toLowerCase();
&&&&&&&&var&dataURL&=&canvas.toDataURL(&image/&+ext);
&&&&&&&&return&dataURL;
function&ssss&()&{
console.log(&shangchaun&);
var&imgArray&=&new&Array(); //图片数组
var&imgArr&=&new&Array();//图片base64数组
var&reder&=&new&FileReader();
var&stt&=&reder.readAsDataURL(document.getElementById(&hudd&).src);
var&stt&=&getBase64Image(document.getElementById(&hudd&));
var&stt2&=&getBase64Image(document.getElementById(&hudd2&));
imgArray.push(stt);
imgArray.push(stt2);
//处理base64编码之后的字符串
for&(var&i&=&0;i&imgArray.i++)&{
var&strs&=&new&Array();
strs&=&imgArray[i].split(&,&);
var&imgPath&=&strs[strs.length-1];
imgArr.push(imgPath);
//转换为json串
var&imgJson&=&JSON.stringify(imgArr);
mui.ajax(&http://adapp.jidonggame.com/upload.html&,{
'pic':imgJson
type:'post',
timeout:10000,
dataType:'json',
success:function&(data)&{
mui.alert(JSON.stringify(data));
error:function&(xhr,type,errorThrown)&{
console.log(xhr+&,&+type+&,&+errorThrown);
&div&class=&mui-content&&
&&&&&button&type=&button&&onclick=&ssss()&&class=&mui-btn&mui-btn-blue&mui-btn-block&&上传按钮&/button&
&&&&&div&id=&imgg&&
&&&& &img&id=&hudd&&src=&13.jpg&/&
&&&& &img&id=&hudd2&&src=&14.png&/&
&&&&&/div&
&/html&六、参考文章
Sweeping payments
&Pay by WeChat
Leave a Comment
submitting...401 - 未授权: 由于凭据无效，访问被拒绝。
401 - 未授权: 由于凭据无效，访问被拒绝。
您无权使用所提供的凭据查看此目录或页面。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
hbuilder图片上传服务器端代码怎么写？（ h5+）
导读：Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上...
Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。
具体可以看一下这篇文章&
php服务器代码实现：
if&($_SERVER['REQUEST_METHOD']&==&'POST')&{&
&&&&$ret=array('strings'=&$_POST,'error'=&'0');&
&&&&$fs=array();&
&&&&foreach&(&$_FILES&as&$name=&$file&)&{&
&&&&&&&&$fn=$file['name'];&
&&&&&&&&$ft=strrpos($fn,'.',0);&
&&&&&&&&$fm=substr($fn,0,$ft);&
&&&&&&&&$fe=substr($fn,$ft);&
&&&&&&&&$fp='files/'.$fn;&
&&&&&&&&$fi=1;&
&&&&&&&&while(&file_exists($fp)&)&{&
&&&&&&&&&&&&$fn=$fm.'['.$fi.']'.$fe;&
&&&&&&&&&&&&$fp='files/'.$fn;&
&&&&&&&&&&&&$fi++;&
&&&&&&&&}&
&&&&&&&&move_uploaded_file($file['tmp_name'],$fp);&
&&&&&&&&$fs[$name]=array('name'=&$fn,'url'=&$fp,'type'=&$file['type'],'size'=&$file['size']);&
&&&&$ret['files']=$fs;&
&&&&echo&json_encode($ret);&
&&&&echo&&{'error':'Unsupport&GET&request!'}&;&
想要查看其它语言上传方法请查看这篇文章：http://ask.dcloud.net.cn/question/722
转载请注明（B5教程网）原文链接：
网友评论：}