Js Code for transferring images to the server in seconds

This article describes in detail the complete code for uploading images to the server by uploader in seconds, which has some reference value, interested friends can refer to this article for details about the complete code for uploading images to the server in seconds by uploader, which has some reference value. Interested friends can refer

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 appendFile (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 get 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 ("
"); 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 ("
");});});}

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:

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:

The plus sign is the font: 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 the detailed description of the Code for transferring images to the server in seconds in js. For more information, see other related articles in the first PHP community!