Angular-file-upload Backstage Webapi C #

Angular-file-upload How to set the loading environment, any search a lot of, I will not write.

Mainly write the actual function:

1. Upload a single picture file, display the image after uploading, and clear the selected file, and you need to select it again when uploading. "Multi-Select, what parameters, etc., please refer to other blogs"

2.c# Write Webapi Save the file from the front end. Returns the saved Web page path.

Front-End Code:

{{title}}<div>    <!--<input type= "file" Ng2fileselect [uploader]= "uploader" (change) = " Selectedfileonchanged ($event) "Multiple/>-->    <input type=" file "#nguploader Ng2fileselect [uploader]=] Uploader "(change) =" selectedfileonchanged ($event) "/>    <input type=" button "(click) =" UploadFile (picid, Nguploader) "value=" Upload "/></div><div>    </div>

 1 Import {Component, OnInit} from ' @angular/core '; 2 Import {Fileuploader} from ' Ng2-file-upload '; 3 4 @Component ({5 templateurl: ' app/app-fileupload/fileupload.component.html ' 6}) 7 8 export class Fileuploadcompo Nent Implements OnInit {9 title = ' files upload '; mysrc:string;12 constructor () {}13 ngoninit (): V OID {}14//Initialize definition uploader variable, used to configure the uploader property in input uploader:fileuploader = new Fileuploader ({ RL: "Http://localhost:52513/api/uploads", removeafterupload:true,18}); 19//define event, select File Selectedfil Eonchanged (event:any) {21//print File Select name +//Console.log (Event.target.value); 23 24}25//Definition Events, uploading files 26//Why do you want to pass the front-end control, instead of using a variable at the front end with the {{value}} method? 27//Because the onsuccess internal data and external not a scope, in the back to change the value of the data front Desk no reflection, specifically why, I do not know.             UploadFile (Picid:htmlimageelement, nguploader:htmlinputelement) {if (Nguploader.value = = "") {30 Alert (' You had not select file! ');   31          return;32}33//upload cross-domain Verification this.uploader.queue[0].withcredentials = false;35//Success The callback function after the this.uploader.queue[0].onsuccess = function (response, status, headers) {PNS if (status = = 200 {38//upload the file to get the data returned by the server//let tempres = json.parse (response); src = response;41 picid.src = response.replace (' "', '). Replace ('" ', '); nguploader.val UE = "";}44};45 this.uploader.queue[0].upload (); Start uploading 46}47}

Webapi Code:

1         [Route ("Api/uploads")] 2 public         ihttpactionresult postupload () 3         {4//             Multiple Files 5             // Httpfilecollection myhttpfilecollection = HttpContext.Current.Request.Files; 6             //Single file 7             httppostedfile myhttppostedfile = httpcontext.current.request.files[0]; 8             String spath = HttpContext.Current.Server.MapPath ("/uploadfiles/"); 9             if (! Directory.Exists (spath))             {                 directory.createdirectory (spath);             }13             Myhttppostedfile.saveas (spath + myhttppostedfile.filename);             string sreturn = "http://" + HttpContext.Current.Request.Url.Authority.ToString () + "/uploadfiles/" + myhttppostedfile.filename;15             return Ok (Sreturn);//Success         

Transferred from: http://www.cnblogs.com/cxd1008/p/7879676.html

Angular-file-upload Backstage Webapi C #