这篇文章主要为大家详细介绍了uploader秒传图片到服务器的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
先看看效果图：
页面中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("发表成功");
//插入本地数据库
wt.close();
mui.back();
} else {
console.log("上传失败：" + status);
wt.close();
}
}
);
var title = $("#tbxtitle").val();
if (title.length < 1) {
wt.close();
mui.toast("内容不能为空");
} 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("准备上传"+files.length+"个图片");
for (var i = 0; i < files.length; i++) {
var f = files[i];
// console.log("准备上传的图片路径："+f.path);
task.addFile(f.path, {
key: f.name
});
}
task.start();
}
}
// 添加文件
var index = 1;
var newUrlAfterCompress;
function appendFile(p) {
files.push({
name: "uploadkey" + index,//这个值服务器会用到，作为file的key
path: p
});
index++;
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
}
function getposition() {
plus.geolocation.getCurrentPosition(function(p) {
var codns = p.coords; // 获取地理坐标信息；
lat = codns.latitude; //获取到当前位置的纬度；
longt = codns.longitude; //获取到当前位置的经度
}, 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("页面初始化的一些操作：
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布局，比较简单，模仿微信的：
- @@##@@
服务端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，其实没什么样式的：
加号是字体：iconfont.cn/
头部样式是二次修改HB的样式，如果你不是用HB开发的话，自己写CSS就行了。
