- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我得到了相同的代码,但我遇到了这种错误:
Uncaught TypeError: Cannot read property '0' of undefined at HTMLInputElement. (upload.js:18) at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2) at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)
这是我的代码:
$(document).ready(function(){
$('.upload-btn').on('click', function(){
$('#upload-input').click();
$('.progress-bar').text('0%');
$('.progress-bar').width('0%');
});
$('#upload-input').on('change', function(){
var uploadInput = $('#upload-input').val();
if(uploadInput != undefined){
// var form = $('form')[0];// You need to use standard javascript object here
var formData = new FormData();
console.log(uploadInput[0]);
formData.append('upload', uploadInput[0].files[0]).val();
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
uploadInput.val('');
},
xhr: function(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e){
if(e.lengthComputable){
var uploadPercent = e.loaded / e.total;
uploadPercent = (uploadPercent * 100);
$('.progress-bar').text(uploadPercent + '%');
$('.progress-bar').width(uploadPercent + '%');
if(uploadPercent == 100){
$('.progress-bar').text('Completed');
$('#completed').text('File Uploaded');
}
}
}, false);
return xhr;
}
})
}
})
})
<div class="row">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar"></div>
</div>
<button class="btn btn-success btn-md upload-btn" type="button">Upload File</button>
<input type="file" class="form-control" name="upload" id="upload-input" style="display: none;">
</div>
最佳答案
你的代码有很多错误
var uploadInput = $('#upload-input').val();
您选择的是文件路径,而不是<input>
标记更改它:var uploadInput = $('#upload-input');
这是错误的 Syntex formData.append('upload', uploadInput[0].files[0]).val();
更改它:formData.append('upload', uploadInput[0].files[0]);
工作代码:
$(document).ready(function(){
$('.upload-btn').on('click', function(){
$('#upload-input').click();
$('.progress-bar').text('0%');
$('.progress-bar').width('0%');
});
$('#upload-input').on('change', function(){
var uploadInput = $('#upload-input');
if(uploadInput != undefined){
// var form = $('form')[0];// You need to use standard javascript object here
var formData = new FormData();
console.log(uploadInput[0]);
formData.append('upload', uploadInput[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
uploadInput.val('');
},
xhr: function(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e){
if(e.lengthComputable){
var uploadPercent = e.loaded / e.total;
uploadPercent = (uploadPercent * 100);
$('.progress-bar').text(uploadPercent + '%');
$('.progress-bar').width(uploadPercent + '%');
if(uploadPercent == 100){
$('.progress-bar').text('Completed');
$('#completed').text('File Uploaded');
}
}
}, false);
return xhr;
}
})
}
})
})
关于jquery - Ajax 表单数据文件上传进度百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57206885/
我一直在开发一个 .NET 字符串格式化库来协助应用程序的本地化。它称为 SmartFormat 并在 GitHub 上开源. 它试图解决的问题之一是 Grammatical Numbers .这也称
leetcode关于单数II的题目是: 给定一个整数数组,除一个元素外,每个元素出现三次。找到那一个。笔记:您的算法应该具有线性运行时复杂度。你能在不使用额外内存的情况下实现它吗? 其实我已经从网站上
我想知道创建/命名模型的首选方法是什么? 我的应用程序有一个“用户”模型,其中包含用于创建、获取、更新(等)用户记录的所有相关业务逻辑。 在我的一些 Controller 中,我可能想要获取多个“用户
在我的 Mysql 数据库中,我有一个术语列表,例如(首字母大写,大多数时候是复数) Hairdressers Restaurants Beauty Salons Fournitures For Re
如果我决定为我的所有路线名称使用复数形式,但某些资源仅作为一个东西存在,您是否将其保持为单数(更直观)或尊重使用复数的决定并保持这种方式? 我们正在用 PHP 为我们的客户门户网站设计一个新的 API
我可能在做一些愚蠢的事情,但是...... 应用/模型/user.rb: class User 然后,当我导航到 /users/123/totem/new 时,出现错误: ActionView::
您能否澄清一些 Matplotlib 术语: “subplots”(或“subplot”?)这个词是“axes”的同义词吗? “轴”和“轴”的单数/复数是什么? 最佳答案 这确实是一个令人困惑的问题。
我有一个 profile我的应用程序中的模型。我想允许用户通过 /profile 查看他们自己的个人资料,所以我创建了这条路线: resource :profile, :only => :show 我
我是一名优秀的程序员,十分优秀!