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


Top 5 Contributors of the Month
david stephan

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) {
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!";
}
}
}

Responses
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
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

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