jquery image upload function finishing

Recently in doing a picture uploaded to the server function, before the basic no JS experience, with the plug-in is also online. It took him one weeks to fix it, and now it's time to summarize it and see it later.

The plugin is Webuploader, there are many examples, I look for examples such as:

When instantiating the Webuploader, you need to modify the address of the server in the Upload.js file in order to upload the specified image to the server code as follows:

     //instantiation ofuploader =webuploader.create ({pick: {ID:' #filePicker ', Label:' Click to select Image '}, FormData: {uid:123}, DND:' #dndArea ', paste:' #uploader ', SwF:' Uploader.swf ', chunked:false, ChunkSize:512 * 1024, server:' Handler1.ashx ',//services to handle uploading images            //runtimeorder: ' Flash ',            //File FilteringAccept: {title:' Images ', Extensions:' Gif,jpg,jpeg,bmp,png ', Mimetypes:' image/* '             },        });

It is important to note that HANDLER1.ASHX is a service for uploading images, which is used to save uploaded images to the server with the following file code:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.IO; usingSystem.Net;usingsystem.web;usingSystem.Web.Services;namespacejqueryuploaddemo{/// <summary>    ///Summary description of $codebehindclassname $/// </summary>[WebService (Namespace ="http://tempuri.org/")] [WebServiceBinding (ConformsTo=Wsiprofiles.basicprofile1_1)]  Public classUploadhandler:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; Context. Response.Charset="Utf-8"; Httppostedfile file= Context. request.files["Filedata"]; stringUploadpath = HttpContext.Current.Server.MapPath (@context. request["folder"])+"\\"; if(File! =NULL)              {                 if(!directory.exists (Uploadpath))                 {directory.createdirectory (Uploadpath); } file. SaveAs (Uploadpath+file.                  FileName); //If the following code is missing, the upload queue display will not disappear automatically after uploading successfully .Context. Response.Write ("1"); }               Else{context. Response.Write ("0"); }          }         Public BOOLisreusable {Get            {                return false; }        }    }}

When the upload is complete, the front end needs to get the data returned by the server for storing in the database, looking for a half-day, and finally found in Webuploader.js's _finishfile function, which shows only part of the code:

//complete the upload. _finishfile:function(file, ret, HDS) {varOwner = This. Owner; Postfilename=ret._raw;//gets the parameters returned by the server                returnowner. Request (' After-send-file ', arguments,function() {file.setstatus (status.complete); Owner.trigger (' Uploadsuccess ', file, ret, HDS); }). Fail (function(reason) {//if the external is already marked as invalid or something, no longer changes the state.                             if(File.getstatus () = = =status.progress) {file.setstatus (status.error, reason); } Owner.trigger (' Uploaderror ', file, reason); }). Always (function() {Owner.trigger (' Uploadcomplete ', file);            }); },

View Code

After getting the returned data, you need to pass the data into Upload.js, which is used to save to the database, upload.js in stats = Uploader.getstats (), is to get some information returned, in the UpdateStatus function

The code is posted below. However, the stats object does not get the parameters returned by the server, only the basic information of the upload is returned, it is necessary to add the Postfilenames attribute in the queue function in Webuploader.js, the method part code is as follows:

      functionQueue () {/** * Number of statistics files.             * * The number of files in the ' Numofqueue ' queue. * * ' numofsuccess ' upload successful number of files * * ' numofcancel ' number of files cancelled * * ' numofprogress ' number of files being uploaded *             * ' numofuploadfailed ' upload the wrong number of files.             * * ' numofinvalid ' invalid number of files.             * * * ' numofdeleted ' The number of files removed. * * ' postfilenames ' is used to save the returned file name * @property {Object} stats*/             This. Stats ={numofqueue:0, numofsuccess:0, Numofcancel:0, numofprogress:0, numofuploadfailed:0, Numofinvalid:0, numofdeleted:0, Numofinterrupt:0, Postfilenames:NewArray ()};

At this point, the returned data can be written to the database in the Updatestatu method in Upload.js, and the function code is as follows:

 functionUpdateStatus () {varText = ' ', stats; if(state = = = ' Ready ') {text= ' SELECT ' + FileCount + ' picture, total ' +webuploader.formatsize (fileSize)+ '. ‘; } Else if(state = = = ' Confirm ')) {Stats=uploader.getstats (); if(stats.uploadfailnum) {text= ' successfully uploaded ' + stats.successnum+ ' photo, ' +Stats.uploadfailnum+ ' Photo upload failed, <a class= "Retry" href= "#" > re-upload </a> failed picture or <a class= "Ignore" href= "#" > Ignore </a> '                }            } Else{Stats=uploader.getstats (); Addimageinfo (stats);//add your own function to write the picture information to the databaseText = ' Total ' + FileCount + ' Zhang (' +webuploader.formatsize (fileSize)+ '), uploaded ' + stats.successnum + ' Zhang '; if(stats.uploadfailnum) {text+ = ', failed ' + Stats.uploadfailnum + ' Zhang ';        }} $info. html (text); }

You define a function to store the data in the database, with Ajax and webservice written to the database, the function code is as follows:

        //to write picture information to a database        functionAddimageinfo (stats) {
for (var i = 0;i<stats.postfilenames.length;i++) {varServerURL = "Http://localhost:8888/XXXXX.asmx"; $.ajax ({type:' POST ', Url:serverurl+ '/xxxxxx ', Data:' {stationattas: ' + stats[i].postfilenames[i] + '} ', datatype:"JSON", headers: {"Content-type": "Application/json"}, Success:function(data) {///call back after the service is successful; }, Error:function(XMLHttpRequest, textstatus) {alert ("Xmlhttprequest.state:" + xmlhttprequest.state + "-xmlhttprequest.readystate:" + xmlhttprequest.readystate + "- Textstatus: "+ textstatus +"-xmlhttprequest.responsetext: "+xmlhttprequest.responsetext); }                })
}        }

This enables the ability to upload an image. Another essay will show you how to manage the uploaded images.

Recently in also doing ArcGIS for Js buffer query function, which also has the same function, by the way record.

When using a buffer query, the EXECUTE function is executed, and the error function pops up the hint as shown:

This is because: Query.geometry is a polygon (with more than one point) caused by the URL of the Web service more than 2048 parameters, and we are using the Get method (the maximum number of characters is 2048) is not a post method, Requires PROXY.ASHX processing, requires two files Proxy.ashx and proxy.config, two files need to be placed in IIS. Add the following two lines of code before invoking the query function.

  " http://localhost/proxy.ashx " ;   false;

The Proxy.config code is as follows:

<ProxyconfigMustmatch= "true">  <Serverurls>    <!--ServerURL Options:url = Location of the ArcGIS Server, either specific URL or stem matchAll = True to forward any request beginning with the URL token = (optional) token to include for secured service /c0> -    <ServerURLURL= "http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"MatchAll= "true"token=""></ServerURL>    <ServerURLURL= "http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"MatchAll= "true"token=""></ServerURL>    <ServerURLURL= "http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"MatchAll= "true"></ServerURL>    <ServerURLURL= "http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"MatchAll= "true"></ServerURL>  </Serverurls></Proxyconfig>

jquery image upload function finishing