[英]file upload using jQuery-File-Upload plugin file control does not show filename
我想在上傳進度中顯示進度條,並等待單擊按鈕開始上傳,因為這樣做文件輸入不再使用文件名更新
這是代碼:
$(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 + '%');
}
});
});
如何獲得仍顯示在輸入中的文件名?
<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;
}
在這里檢查: https : //codepen.io/bhavinG/pen/QXajZL
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.