I have a WCF service which has a function Upload file.
public void UploadFile(Stream s)
{
FileStream targetStream = null;
Stream sourceStream = s;
string uploadFolder = @"C:\upload\";
string filePath = Path.Combine(uploadFolder, Guid.NewGuid().ToString());
using (targetStream = new FileStream(filePath, FileMode.Create, FileAccess.Write, FileShare.None))
{
//read from the input stream in 6K chunks
//and save to output stream
const int bufferLen = 65000;
byte[] buffer = new byte[bufferLen];
int count = 0;
while ((count = sourceStream.Read(buffer, 0, bufferLen)) > 0)
{
targetStream.Write(buffer, 0, count);
}
targetStream.Close();
sourceStream.Close();
}
}
[ServiceContract]
public interface ITransferService
{
[OperationContract]
RemoteFileInfo DownloadFile(DownloadRequest request);
//[OperationContract]
//void UploadFile(RemoteFileInfo request);
[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "/UploadFile")]
void UploadFile(Stream s);
}
And I am using this Ajax/Jquery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX File Upload - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'http://localhost:35711/webservice/TransferService.svc/UploadFile',
name: 'uploadfile',
onSubmit: function(file, ext){
// if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// // extension is not allowed
// status.text('Only JPG, PNG or GIF files are allowed');
// return false;
//}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>
</head>
<body>
<div id="mainbody" >
<h3>» AJAX File Upload Form Using jQuery</h3>
<!-- Upload Button, use any id you wish-->
<div id="upload" ><span>Upload File<span></div><span id="status" ></span>
<ul id="files" ></ul>
</div>
</body>
The same function works fine when I am using ASP .Net as client. But I am not able to do it with Ajax/Jquery, Is it possible using Ajax/JQuery? and if yes then how?
Can anyone provide a simple JQuery example?
