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> 

加号是字体：
头部样式是二次修改hb的样式，如果你不是用hb开发的话，自己写css就行了。

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