.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Forum >> C# >> Post New QuestionBookmark and Share Subscribe to Forum

Uploading Files using XHR2 to ASP.net Web Service

Posted By: DotnetUser     Posted Date: November 09, 2014    Points:5   Category :C#
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) {
$(this).css('border', "2px solid green");

obj.on('drop', function (e) {
$(this).css('border', "2px dashed red");

var files = e.originalEvent.dataTransfer.files;
var file = files[0];

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


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)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
public class SaveImageService : System.Web.Services.WebService
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);

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);
return "Success!";

Author: DotnetUser             
Posted Date: November 09, 2014     Points: 20   

Just so no one is confused, there should only be one foreach loop and only one httpRequest variable in the web service. Basically I meant to comment out one of them and test them out one at a time but I forgot to comment one of them out when I posted the question.

Post Reply

You must Sign In To post reply
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend