I want to show a progress bar during upload progress and wait for a click on a button to start the upload when I do that the file input does not update with the filename anymore
Here is the code:
$(function () {
var started = false;
var progress_bar = $('#progress');
$('#id_document').fileupload({
dataType: 'html',
add: function (e, data) { // Code from https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin#how-to-start-uploads-with-a-button-click
data.context = $('#uploadButton')
.click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
fail: function (e, data, x) {
console.info("Upload fail");
},
done: function (e, data) {
console.info("Done");
$('body').html(data.result);
},
progressall: function (e, data) {
if (!started) {
$('#upload_input').slideUp();
$('#progress-bar').removeClass('hidden');
started = true;
}
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress-bar').css('width',progress + '%');
$('#progress-bar').html(progress + '%');
}
});
});
How to get the filename still displayed in the input?
<form>
<input type="file" id="file-upload" multiple required />
<label for="file-upload">Browse</label>
<div id="file-upload-filename"></div>
<button type="submit">Add</button>
</form>
var input = document.getElementById( 'file-upload' );
var infoArea = document.getElementById( 'file-upload-filename' );
input.addEventListener( 'change', showFileName );
function showFileName( event ) {
// the change event gives us the input it occurred in
var input = event.srcElement;
// the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
var fileName = input.files[0].name;
// use fileName however fits your app best, i.e. add it into a div
infoArea.textContent = 'File name: ' + fileName;
}
Check Here : https://codepen.io/bhavinG/pen/QXajZL
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.