uploader秒傳圖片到服務(wù)器完整代碼
更新時間:2017年04月22日 15:26:43 作者:云上人間欽自賞
這篇文章主要為大家詳細(xì)介紹了uploader秒傳圖片到服務(wù)器的完整代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
先看看效果圖:



頁面中js部分
var f1 = null;
var picarr = new Array();
var basearr = new Array();
var lat = "",
longt = "";
var files = [];
// 上傳文件
function upload() {
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(server + "?action=dynamicadd", {
method: "POST"
},
function(t, status) { //上傳完成
if (status == 200) {
// console.log("上傳成功:" + t.responseText);
mui.toast("發(fā)表成功");
//本地數(shù)據(jù)庫
wt.close();
mui.back();
} else {
console.log("上傳失?。? + status);
wt.close();
}
}
);
var title = $("#tbxtitle").val();
if (title.length < 1) {
wt.close();
mui.toast("內(nèi)容不能為空");
} else {
task.addData("title", title);
task.addData("uid", getUid());
task.addData("userid", plus.storage.getItem("policeid"));
//task.addData("lat", lat.toString());
//task.addData("longt", longt.toString());
// console.log("準(zhǔn)備上傳"+files.length+"個圖片");
for (var i = 0; i < files.length; i++) {
var f = files[i];
// console.log("準(zhǔn)備上傳的圖片路徑:"+f.path);
task.addFile(f.path, {
key: f.name
});
}
task.start();
}
}
// 添加文件
var index = 1;
var newUrlAfterCompress;
function appendFile(p) {
files.push({
name: "uploadkey" + index,//這個值服務(wù)器會用到,作為file的key
path: p
});
index++;
}
// 產(chǎn)生一個隨機數(shù)
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
}
function getposition() {
plus.geolocation.getCurrentPosition(function(p) {
var codns = p.coords; // 獲取地理坐標(biāo)信息;
lat = codns.latitude; //獲取到當(dāng)前位置的緯度;
longt = codns.longitude; //獲取到當(dāng)前位置的經(jīng)度
}, function(e) {
//alert("獲取百度定位位置信息失?。? + e.message);
}, {
provider: 'baidu'
});
}
function galleryImgs() { // 從相冊中選擇圖片
plus.gallery.pick(function(e) {
$(".dynamic_images ul li").remove(".pickimg");
// console.log("選擇了"+e.files.length+"個圖片");
for (var i = 0; i < e.files.length; i++) {
if (i < 9) {
picarr[i] = e.files[i];
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");
var dstname="_downloads/"+getUid()+".jpg";//設(shè)置壓縮后圖片的路徑
newUrlAfterCompress=compressImage(e.files[i],dstname);
appendFile(dstname);
//console.log(e.files[i]);
//console.log(dstname);
}
}
}, function(e) {
console.log("取消選擇圖片");
}, {
filter: "image",
multiple: true
});
}
//壓縮圖片,這個方法,無法return
function compressImage(src,dstname) {
//var dstname="_downloads/"+getUid()+".jpg";
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite:true,
quality: 20
},
function(event) {
//console.log("Compress success:"+event.target);
return event.target;
},
function(error) {
console.log(error);
return src;
//alert("Compress error!");
});
}
//旋轉(zhuǎn)圖片,本文沒用到
function rotateImage() {
plus.zip.compressImage({
src: "_www/a.jpg",
dst: "_doc/a.jpg",
rotate: 90 // 旋轉(zhuǎn)90度
},
function() {
alert("Compress success!");
},
function(error) {
alert("Compress error!");
});
}
function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "從相冊選擇"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
}
);
}
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //
$(".dynamic_images ul li").remove(".pickimg");
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");
});
});
}
頁面初始化的一些操作:
document.addEventListener("plusready", plusReady, false);
function plusReady() {
document.getElementById("addnew").addEventListener("tap", function() {
showActionSheet();//拍照還是相冊
});
document.getElementById("fabiao").addEventListener("tap", function() {
upload();//上傳文件
});
plus.nativeUI.closeWaiting();
}
html布局,比較簡單,模仿微信的:
<div class="dynamic_images">
<ul>
<!--<li><img src="images/cbd.jpg"></li>-->
<li><img src="images/iconfont-tianjia.png" id="addnew"></li>
<!--<li><span class="mui-icon iconfont icon-jia2" style="font-size: 28px;"></span></li>-->
</ul>
</div>
服務(wù)端asp.net版
string file = "";
int count = Request.Files.Count;
for (int i = 0; i < count; i++)
{
int l = Request.Files["uploadkey" + (i + 1)].ContentLength;
byte[] buffer = new byte[l];
Stream s = Request.Files["uploadkey" + (i + 1)].InputStream;
System.Drawing.Bitmap image = new System.Drawing.Bitmap(s);
string imgname = Common.GetGuid() + ".jpg";
string path = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/";
if (!Directory.Exists(HttpContext.Current.Server.MapPath(path)))
{
System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));
}
image.Save(Server.MapPath(path + "/" + imgname));
}
速度非常快,測試過,如果不壓縮速度沒有明顯的下降,但是考慮到顯示時候加載的問題,還是進行了壓縮。
后補的CSS,其實沒什么樣式的:
<style type="text/css">
.dynamic_images {
width: 100%;
}
.dynamic_images ul {
margin: 0;
padding: 0;
}
.dynamic_images ul li {
float: left;
list-style: none;
width: 25%;
}
.dynamic_images ul li img {
width: 98%;
height: 80px;
}
</style>
加號是字體:http://iconfont.cn/
頭部樣式是二次修改HB的樣式,如果你不是用HB開發(fā)的話,自己寫CSS就行了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery autocomplete自動完成插件的的使用方法
最近剛開始學(xué)jquery,想實現(xiàn)類似GOOGLE搜索時自動顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08
jQuery實現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實例
這篇文章主要介紹了jQuery實現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能,結(jié)合完整實例形式分析了jQuery基于鼠標(biāo)滾輪mousewheel事件進行頁面元素屬性動態(tài)操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10

