Hi all, I've read many tutorials on uploading image files using Javascript XHR2 and PHP but I have yet to find any tutorial on uploading files using Javascript XHR2 object and ASP.net web service. I've attempted to send an image to a folder on the server using the jQuery XHR2 object from some of the tutorials I've read. Then I tried to save the file to a folder on the server using asp.net web service but it's not working. I don't know if this is even possible, please take a look at my code below:
// This is front end code $(function () { var obj = $('.drop');
obj.on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); $(this).css('border', "2px solid green"); });
obj.on('drop', function (e) { e.stopPropagation(); e.preventDefault(); $(this).css('border', "2px dashed red");
var files = e.originalEvent.dataTransfer.files; var file = files[0]; console.log(file); upload(file); });
function upload(file) { xhr = new XMLHttpRequest(); xhrObj.open('post', 'http://localhost:26692/SaveImageService.asmx?t=" + SaveImage()', true); xhr.setRequestHeader('Content-Type', "multipart/form-Data");
xhr.setRequestHeader('X-File-Name', file.fileName); xhr.setRequestHeader('X-File-Size', file.fileSize); xhr.setRequestHeader('X-File-type', file.fileType);
xhr.send(file);
var responseObject = xhr.responseText; alert(responseObject); // Test status of upload }; });
//This is my backend code using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.Services; using System.IO; using System.Drawing; using System.Drawing.Imaging;
namespace MultipleImageUploadDemo { /// <summary> /// Summary description for SaveImageService /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class SaveImageService : System.Web.Services.WebService { [WebMethod] public string SaveImage() { var httpRequest = HttpContext.Current.Request; foreach (string file in httpRequest.Files) { var postedFile = httpRequest.Files[file]; var filePath = HttpContext.Current.Server.MapPath("~/MultipleImageUploadDemo/Upload/" + postedFile.FileName); postedFile.SaveAs(filePath); }
var httpRequest = HttpContext.Current.Request; foreach (string file in httpRequest.Files.AllKeys) { var postedFile = httpRequest.Files[file]; var filePath = HttpContext.Current.Server.MapPath("~/Upload/" + postedFile.FileName); postedFile.SaveAs(filePath); } return "Success!"; } } }
|