@{
Layout = null;
}
<h2>Demo Upload with jQuery and Progress</h2>
<form method="post" enctype="multipart/form-data">
<input type="file" id="files_input_field" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" />
<input type="button" id="select_and_upload_button" value="Upload Photos.." />
</form>
<progress id="ctlProgress" value="0" max="100"></progress>
<div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div>
@*------------<
jQuery-script >------------*@
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<script>
//----<
events >----
$("#select_and_upload_button").click(function () { $("#files_input_field").click(); });
//--------<
functions >--------
function upload_files() {
//------<
upload_files() >------
//--<
get selected files >--
var fileUpload = $("#files_input_field").get(0);
var files = fileUpload.files;
if (files.length == 0) return;
//<
load into FormData >
for (var i = 0; i < files.length; i++) {
var data = new FormData();
data.append(files[i].name,
files[i]);
//</ load into FormData >
//--</ get selected files >--
//--< ajax upload >--
$.ajax({
type: "POST",
url: "Demo_03/Demo/UploadFilesAjax",
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded /
evt.total;
$("#ctlProgress").val(percentComplete * 100);
}
}, false);
//Download progress
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded /
evt.total;
//Do something with download
progress
console.log(percentComplete);
}
}, false);
return xhr;
},
contentType: false,
//default:
'application/x-www-form-urlencoded; charset=UTF-8'
processData: false,
//default:
data, other DOMDocument
data: data, //Type: PlainObject or String or Array
//password:string // HTTP access authentication
//username:string // HTTP access authentication
//jQuery 1.8 success->done
error->fail
success: function (data) {
//alert(data);
//console.log(data);
//---< show return >---
//--< Loop: each Result >--
$.each(data, function (index, item) {
//--< Item >--
//*show uploaded Image in
div-Results
var sItem = "<div ><img
src='User_Files/_Upload_Folder/" + item + "'
style='width:150px;'></div>";
$("#divUploaded_Results").append(sItem);
//--</ Item >--
})
//--</ Loop: each Result >--
//---</ show return >---
},
error: function () {
alert("There was error
uploading files!");
}
});
//------</
upload_files() >------
}
}
//--------</
functions >--------
</script>
@*------------</
jQuery-script >------------*@
|