欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uploader秒传图片到服务器完整代码

程序员文章站 2023-08-21 09:19:49
先看看效果图: 页面中js部分 var f1 = null; var picarr = new array(); var basearr...

先看看效果图:

uploader秒传图片到服务器完整代码

uploader秒传图片到服务器完整代码

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就行了。

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