Uploader uploads images to the server in seconds,

Uploader uploads images to the server in seconds,

Let's take a look:

Js section on the page

Var f1 = null; var picarr = new Array (); var basearr = new Array (); var lat = "", longt = ""; var files = []; // upload the file function upload () {var wt = plus. nativeUI. showWaiting (); var task = plus. uploader. createUpload (server + "? Action = dynamicadd ", {method:" POST "}, function (t, status) {// upload completed if (status = 200) {// console. log ("uploaded successfully:" + t. responseText); mui. toast ("published successfully"); // Insert the local database wt. close (); mui. back ();} else {console. log ("Upload Failed:" + status); wt. close () ;}}); var title =$ ("# tbxtitle "). val (); if (title. length <1) {wt. close (); mui. toast ("content cannot be blank");} 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 ("prepare for upload" + files. length + "image"); for (var I = 0; I <files. length; I ++) {var f = files [I]; // console. log ("Path of the image to be uploaded:" + f. path); task. addFile (f. path, {key: f. name});} task. start () ;}// Add the file var index = 1; var newUrlAfterCompress; function PpendFile (p) {files. push ({name: "uploadkey" + index, // This value will be used by the server, as the key path of file: p}); index ++ ;} // generate a random number function getUid () {return Math. floor (Math. random () * 100000000 + 10000000 ). toString ();} function getposition () {plus. geolocation. getCurrentPosition (function (p) {var codns = p. coords; // obtain geographic coordinate information; lat = codns. latitude; // obtain the latitude of the current position; longt = codns. longpolling; // obtain the longitude of the current position}, function (e) {// Alert ("failed to obtain Baidu location information:" + e. message) ;},{ provider: 'baidu'});} function galleryImgs () {// select image plus from the album. gallery. pick (function (e) {$ (". dynamic_images ul li "). remove (". pickimg "); // console. log ("selected" + e. files. length + "image"); for (var I = 0; I <e. files. length; I ++) {if (I <9) {picarr [I] = e. files [I]; $ (". dynamic_images ul "). prepend ("<li class = 'pickimg '>  </li>" ); Var dstname = "_ downloads/" + getUid () + ". jpg "; // set the compressed image path newUrlAfterCompress = compressImage (e. files [I], dstname); appendFile (dstname); // console. log (e. files [I]); // console. log (dstname) ;}}, function (e) {console. log ("unselect image") ;},{ filter: "image", multiple: true}) ;}// compresses the image. This is an abnormal method, unable to return function compressImage (src, dstname) {// var dstname = "_ downloads/" + getUid () + ". jpg "; plus.zip. compressIm Age ({src: src, dst: dstname, overwrite: true, quality: 20}, function (event) {// console. log ("Compress success:" Prepare event.tar get); return event.tar get;}, function (error) {console. log (error); return src; // alert ("Compress error! ");} // Rotate the image. function rotateImage () {plus.zip is not used in this article. compressImage ({src: "_ www/a.jpg", dst: "_ doc/a.jpg", rotate: 90 // rotate 90 degrees}, function () {alert ("Compress success! ") ;}, Function (error) {alert (" Compress error! ") ;}) ;}Function showActionSheet () {var bts = [{title:" photo "},{ title:" select from album "}]; plus. nativeUI. actionSheet ({cancel: "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 '>  </li> ");});});}

Page initialization operations:

Document. addEventListener ("plusready", plusReady, false); function plusReady () {document. getElementById ("addnew "). addEventListener ("tap", function () {showActionSheet (); // photograph or album}); document. getElementById ("fabiao "). addEventListener ("tap", function () {upload (); // upload File}); plus. nativeUI. closeWaiting ();}

Html layout, relatively simple, imitating:

<div class="dynamic_images">   <ul>     <!--<li></li>-->     <li></li>     <!--<li><span class="mui-icon iconfont icon-jia2" style="font-size: 28px;"></span></li>-->    </ul> </div> 

Server 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)); } 

The speed is very fast and tested. If the compression speed is not significantly reduced, the compression is still performed considering the loading problem during display.

In fact, there is no style for the supplemented 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> 

The plus sign is the font: http://iconfont.cn/
The Header style is a secondary change to the HB style. If you do not use HB for development, you can write CSS on your own.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.