I have written a piece of javascript for file upload and it is working well, but I want to be able to slice files to blobs and send the blobs instead of the whole file to the server() I know hpoe to receive the blobs on the server and append all the blobs but I do not know how to embed this piece of code in myscript.js
I want to send the blobs here
$('form').ajaxForm({
url: "UploadHandler.ashx",
type: "POST",
contentType: false,
processData: false,
this piece of code slice the file and push it into
var blobs = [];
var fl = document.getElementById("files");
var L = fl.files.length;
for (var i = 0; i < L ; i++) {
var file = fl.files[i];
var bytes_per_chunk = 1024 * 1024;
var start = 0;
var end = bytes_per_chunk;
var size = file.size;
var j = bytes_per_chunk;
while (start < size) {
blobs.push(file.slice(start, end));
start = j;
j = start + bytes_per_chunk;;
end = start + bytes_per_chunk;
if (end > size) {
end = size;
}
}
myscript.js
$(document).ready(function () {
$("#btnUpload").click(function (evt) {
var blobs = [];
var status = $('.status');
var percent = $('.percent');
var bar = $('.bar');
$('form').ajaxForm({
url: "UploadHandler.ashx",
type: "POST",
contentType: false,
processData: false,
beforeSend: function () {
status.fadeOut();
bar.width('0%');
percent.html('0%');
},
uploadProgress: function (event, position, total, percentComplete) {
var pVel = percentComplete + '%';
bar.width(pVel);
percent.html(pVel);
},
complete: function (data) {
status.html(data.responseText).fadeIn().fadeOut(9600);
},
success: function (result) {
alert(result);
},
error: function (e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
};
alert('Error: ' + msg);
}
});
});
});
and tis is my aspx file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>uploading file using jquery with generic handler ashx</title>
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/Style/fileupload.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="myscript.js" ></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div>
<div class="fileuploadDiv">
<div class="status"></div>
<h3></h3>
<br /><br />
<input type="file" name="files[]" multiple="multiple" id="files" class="fileSelect" />
<input type="submit" value="Upload" class="button" id="btnUpload" />
<div id="messages"></div>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
</div>
</div>
</form>
</body>
</html>
Submit an article or tip