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("<li class='pickimg'><img src='" + e.files[i] + "' /></li>"); 
 var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径 
 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!"); 
 }); 
 
} 
//旋转图片，本文没用到 
function rotateImage() { 
 plus.zip.compressImage({ 
 src: "_www/a.jpg", 
 dst: "_doc/a.jpg", 
 rotate: 90 // 旋转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> 

服务端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开发的话，自己写CSS就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。