如何實(shí)現(xiàn)uploader秒傳圖片到服務(wù)器

小編給大家分享一下如何實(shí)現(xiàn)uploader秒傳圖片到服務(wù)器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

先看看效果圖：

頁(yè)面中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ā)表成功"); 
        //插入本地?cái)?shù)據(jù)庫(kù) 
        wt.close(); 
        mui.back(); 
      } else { 
        console.log("上傳失?。?quot; + 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+"個(gè)圖片"); 
    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,//這個(gè)值服務(wù)器會(huì)用到，作為file的key 
    path: p 
  }); 
  index++; 
} 
// 產(chǎn)生一個(gè)隨機(jī)數(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("獲取百度定位位置信息失?。?quot; + e.message); 
  }, { 
    provider: 'baidu' 
  }); 
} 
 
function galleryImgs() { // 從相冊(cè)中選擇圖片 
  plus.gallery.pick(function(e) { 
    $(".dynamic_images ul li").remove(".pickimg"); 
//       console.log("選擇了"+e.files.length+"個(gè)圖片"); 
    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 
  }); 
} 
 
//壓縮圖片，這個(gè)比較變態(tài)的方法，無法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: "從相冊(cè)選擇" 
  }]; 
  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>"); 
    }); 
  }); 
}

頁(yè)面初始化的一些操作：

document.addEventListener("plusready", plusReady, false); 
 
function plusReady() { 
  document.getElementById("addnew").addEventListener("tap", function() { 
    showActionSheet();//拍照還是相冊(cè) 
  }); 
  document.getElementById("fabiao").addEventListener("tap", function() { 
    upload();//上傳文件 
  }); 
  plus.nativeUI.closeWaiting(); 
 
}

html布局，比較簡(jiǎn)單，模仿微信的：

<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" ></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)); 
}

速度非?？?，測(cè)試過，如果不壓縮速度沒有明顯的下降，但是考慮到顯示時(shí)候加載的問題，還是進(jìn)行了壓縮。

后補(bǔ)的CSS，其實(shí)沒什么樣式的：

<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>

加號(hào)是字體：http://iconfont.cn/
頭部樣式是二次修改HB的樣式，如果你不是用HB開發(fā)的話，自己寫CSS就行了。

以上是“如何實(shí)現(xiàn)uploader秒傳圖片到服務(wù)器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！