我用 Ajax 撰寫了檔案上傳代碼，它們作業正常，但我無法寫出檔案上傳進度的百分比。我想使用進度條來表示進度百分比。請使用進度條撰寫我的代碼示例。謝謝
我用 Ajax 撰寫了檔案上傳代碼，它們作業正常，但我無法寫出檔案上傳進度的百分比。我想使用進度條來表示進度百分比。請使用進度條撰寫我的代碼示例。謝謝
<td class="d-flex justify-content-around">
<div>
<label asp-for="mostanadPath" class="btn btn-outline-info">
?????? ?????
<span class="oi oi-file h5 text-dark"></span>
</label>
<span class="text-center mt-2" id="spnImageCartMlie" style="color: black;font-size: 12px"></span>
</div>
<div>
<input type="button" onclick="UploadImage()" value="????? ????" class="btn btn-outline-danger" id="btnUpLoad" />
<div id="divmessage" class="text-center hidden m-2"></div>
<input class="d-none" value="@ViewBag.proID" name="id" />
</div>
<input id="newCartMlieImagePathName" name="newCartMlieImagePathName" hidden />
<input id="mostanadPath" asp-for="mostanadPath" type="file" class="d-none">
<div class="mt-5 col-6">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
</div>
</td>
<script>
$("#mostanadPath").change(function () {
var filename = this.files[0].name;
$("#spnImageCartMlie").html(filename);
});
</script>
<script>
var UploadImage = function () {
var data = new FormData;
var file = $("#mostanadPath").get(0);
var files = file.files;
//????? ???? ????
if (files[0].size >= 5120000) {
$("#spnImageCartMlie").removeClass('hidden');
$("#spnImageCartMlie").text('??? ???? ??? ?? 500 ???????? ???');
$("#spnImageCartMlie").css("color", "red");
return false;
}
for (var i = 0; i < files.length; i ) {
data.append('filearray', files[i]);
data.append('filesize', files[i].size);
}
data.append('path', "img\\mostandat\\");
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete '%');
$('.progress-bar').html(percentComplete '%');
}
}, false);
return xhr;
},
url: '@Url.Action("UploadImageFile", "Project")',
type: "POST",
data: data,
contentType: false,
processData: false }).done(function (result) {
if (result.status == "success") {
toastr.success('???? ?? ?????? ????? ??', {
timeOut: 2000,
closeButton: true,
});
$("#newCartMlieImagePathName").val(result.imagename);
}
}).fail(function (result) {
if (result.status != "success") {
toastr.warning('?? ??? ????? ????? ????? ???', {
timeOut: 2000,
closeButton: true,
});
}
});
}
</script>
public IActionResult UploadImageFile(IEnumerable<IFormFile> filearray, String path)
{
String fileName = _uploadFiles.UploadFilesFunc(filearray, path);
return Json(new { status = "success", imagename = fileName });
}
uj5u.com熱心網友回復：
您可以在以下內容中使用此 JQuery 代碼<script>：
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete '%');
$('.progress-bar').html(percentComplete '%');
}
}, false);
return xhr;
},
url: yoururl,
type: "POST",
data: data,
contentType: false,
processData: false
success: function(result) {
console.log(result);
}
});
并在您的頁面中添加此代碼
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
然后您可以在上傳檔案時看到進度條。
================================================
如果你只想要一個按鈕，你可以使用這個代碼：
<input type="file" id="files" />
<script>
$("#files").change(function () {
$.ajax({
//........
});
})
</script>
==================================================
我只是將上面給你的代碼添加到ajax
<div class="container mt-4 col-2">
<table class="table table-bordered">
<tbody class="text-center">
<tr>
<td>
<label asp-for="mostanadPath" class="btn btn-outline-info">
Image selection
<span class="oi oi-file h5 text-dark"></span>
</label>
</td>
</tr >
<tr>
<td>
<span class="text-center" id="spnImageCartMlie" style="color: black;font-size: 12px"></span>
<input id="newCartMlieImagePathName" name="newCartMlieImagePathName" hidden />
</td>
</tr>
<tr>
<td>
<input type="button" onclick="UploadImage()" value="Upload and display the image" class="btn btn-outline-danger" id="btnUpLoad" />
</td>
</tr>
<tr>
<td>
<div id="divmessage" class="text-center hidden"></div>
</td>
</tr>
</tbody>
</table>
<input asp-for="mostanadPath" type="file" class="d-none" >
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
@section Scripts {
<script>
$("#mostanadPath").change(function () {
var filename = this.files[0].name;
$("#spnImageCartMlie").html(filename);
});
</script>
<script>
var UploadImage = function () {
var data = new FormData;
var file = $("#mostanadPath").get(0);
var files = file.files;
//File size control
if (files[0].size >= 512000) {
$("#spnImageCartMlie").removeClass('hidden');
$("#spnImageCartMlie").text('The file size is more than 500 KB');
$("#spnImageCartMlie").css("color", "red");
return false;
}
for (var i = 0; i < files.length; i ) {
data.append('filearray', files[i]);
data.append('filesize', files[i].size);
}
data.append('path', "img\\mostandat\\");
$.ajax({
//add here......
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete '%');
$('.progress-bar').html(percentComplete '%');
}
}, false);
return xhr;
},
type: "post",
url: '/Home/UploadImageFile',
data: data,
contentType: false,
processData: false
}).done(function (result) {
if (result.status == "success") {
$("#divmessage").text("Upload was successful.");
$("#divmessage").css("color", "green");
$("#divmessage").removeClass("hidden");
$("#newCartMlieImagePathName").val(result.imagename);
}
}).fail(function (result) {
if (result.status != "success") {
$("#divmessage").css("color", "red");
$("#divmessage").removeClass("hidden");
$("#divmessage").text("There was a problem uploading.");
}
});
}
</script>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/384707.html