Scribd
Upload
25 views3 pages

File Upload Web Form

This document describes a web application that allows users to upload multiple files using Ajax and jQuery. It includes the HTML, CSS, JavaScript, and C# code. The HTML contains a file input, upload button, and progress bar. The JavaScript handles the file selection, upload via Ajax POST, and updates the progress bar. The C# web service saves the uploaded files to the server.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
25 views3 pages

File Upload Web Form

This document describes a web application that allows users to upload multiple files using Ajax and jQuery. It includes the HTML, CSS, JavaScript, and C# code. The HTML contains a file input, upload button, and progress bar. The JavaScript handles the file selection, upload via Ajax POST, and updates the progress bar. The C# web service saves the uploaded files to the server.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

====

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"


Inherits="FileUploadWebForms.Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<form id="form1" runat="server">
<div class="col-12">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Upload Files</h1>
<p>Ajax jQuery / WebForms / ASMX</p>
</div>
</div>

<div>
<label>Select Files:</label>
<input type="file" id="files" multiple />
<button type="button" id="btnUpload" class="btn
btn-primary">Upload</button>
<hr />
<div class="col-md-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</div>
</div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></
script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></
script>

<script>
$("#btnUpload").on('click', function () {
var formData = new FormData();
var fileUpload = $('#files').get(0);
var files = fileUpload.files;
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
formData.append(files[i].name, files[i]);
}
$.ajax({
url: "http://localhost:59260/service.asmx/Upload",
type: 'POST',
data: formData,
success: function (data) {

},
error: function (data) {
alert('error' + data)
},
cache: false,
contentType: false,
processData: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round((evt.loaded /
evt.total) * 100);

$('.progress-bar').css('width', percentComplete +
'%').attr('aria-valuenow', percentComplete);
$('.progress-bar').text(percentComplete + '%');
console.log(percentComplete);
}
}, false);
return xhr;
},
});
});
</script>
</body>
</html>

=============

Asmx file
===============

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace FileUploadWebForms
{
/// <summary>
/// Summary description for Service
/// </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 Service : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}

[WebMethod]
public void Upload()
{
HttpFileCollection Files = HttpContext.Current.Request.Files;
string path = HttpContext.Current.Server.MapPath("~/App_Data/");

for (int i = 0; i < Files.Count; i++)


{
HttpPostedFile File = Files[i];

string fileName = File.FileName + Guid.NewGuid().ToString();


string extension = Path.GetExtension(File.FileName);

File.SaveAs(Path.Combine(path, String.Concat(fileName,
extension)));

}
}
}
}

You might also like