h5app上传图片

本文介绍了一种在移动端实现图片选择、拍照、压缩及上传的方法。通过使用Plus API,实现了从相册选取或直接拍摄图片的功能,并进行了图片的本地压缩处理以减少上传的数据量。最后,文章展示了如何将压缩后的图片上传到服务器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function galleryImg(divid) {
plus.gallery.pick(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) { // alert(result)
var result = entry.toLocalURL();
$(".content")[divid].src = result;
$('.content1').css('display', 'none');
$('.delete').css('display', 'block');

compressImage(result);
//uploadimge(1,ss,result)


}, function(e) {
plus.nativeUI.toast("读取拍照文件错误:" + e.message);
});
}, function(e) {}, {
filename: "_doc/camera/",
filter: "image"
});
}
// 安卓拍照
function captureImage(i){
huilianUtils.captureImage(function(e) {
$(".content")[i].src = e;
$('.content1').css('display', 'none');
$('.delete').css('display', 'block');
$('.delete').click(function() {
$('.content1').css('display', 'block');
$('.delete').css('display', 'none');
$(".content").attr('src', 'http://o.yyband.com/web/huilian/img/Picture.png')
})
compressImage(e);
})
}






// 拍照
function getImage(divid) {
var cmr = plus.camera.getCamera();
cmr.captureImage(
function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var result = entry.toLocalURL();
// $('#add_li').prepend('<li class="add_picture1" style="position: relative;"><img src="img/about.png" style="float: left;" class="ad"/><img src="img/delete.png" style="width: 15%;position: absolute;top: 15px;right: 20px;" class="delete"/></li>')    
$(".content")[divid].src = result;
$('.content1').css('display', 'none');
$('.delete').css('display', 'block');
$('.delete').click(function() {
$('.content1').css('display', 'block');
$('.delete').css('display', 'none');
$(".content").attr('src', 'http://o.yyband.com/web/huilian/img/Picture.png')
})
compressImage(result);


}, function(e) {
plus.nativeUI.toast("读取拍照文件错误:" + e.message);
});


},
function(e) {}, {
filename: "_doc/camera/",
          index: 1
});
}


function compressImage(url) {
var name = "_doc/upload/123.jpg"; //_doc/upload/F_ZDDZZ-1467602809090.jpg   
plus.zip.compressImage({
src: url, //src: (String 类型 )压缩转换原始图片的路径   
dst: name, //压缩转换目标图片的路径   
quality: 20, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100   
overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件   
},
function(event) {
var path = name; //压缩转换目标图片的路径   
uploadimge(path)
},
function(error) {
plus.nativeUI.toast("压缩图片失败,请稍候再试");
});
}


function uploadimge(imgsrc) { //var numKeys = plus.storage.getLength();
var task = plus.uploader.createUpload(huilianConfig.apiUrl+'Campaign/UploadCampaignImg?token='+token, {
method: "POST"
},
// 上传图片
function(t, status) {
if(status == 200) {
//            alert(t)
// alert(JSON.parse(t.responseText))
// alert(JSON.parse(t.responseText).data)
imgsrc = JSON.parse(t.responseText).data;
var count='?imageView/1/w/900/h/500'
var sr=imgsrc+count;
                
               
                $(".content")[0].src = sr;
               


}

}


);


task.addData("id", 1);
task.addFile(imgsrc, {
key: 'file'
});
task.start();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值