如何解决选择用javascript编写的输入文件后,表单中的提交按钮不起作用
我有用于创建带有图像的新产品的 html 表单,因此在选择产品图像后,我的 html 表单提交按钮将被禁用。我已经用 javascript 编写了文件输入操作。
这里是我的 html 表单代码(一段代码):
<form>
<div class="form-group alert-up-pd">
<div class="small-12 large-4 columns">
<label for="">Добавить изображение</label>
<div class="containers">
<div class="imageWrapper">
<img class="image" src=""></div>
</div>
<span class="file-upload">
<input type="file" name="img" class="file-input">
Выбрать
</span>
</div>
</div>
</div>
</form>
这是javascript代码:
$('.file-input').change(function(e){
var curElement = $('.image');
var reader = new FileReader();
reader.onload = function (e) {
curElement.attr('src',e.target.result);
};
reader.readAsDataURL(this.files[0]);
});
如果您需要更多信息,请询问...
解决方法
您的代码似乎有效。尝试运行该代码段:
$(function(){
$('.file-input').change(function(e){
var curElement = $('.image');
var reader = new FileReader();
reader.onload = function (e) {
curElement.attr('src',e.target.result);
};
reader.readAsDataURL(this.files[0]);
});
});
.image
{
width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group alert-up-pd">
<div class="small-12 large-4 columns">
<label for="">Добавить изображение</label>
<div class="containers">
<div class="imageWrapper">
<img class="image" src="" />
</div>
<span class="file-upload">
<input type="file" name="img" class="file-input" />
Выбрать
</span>
</div>
</div>
</div>
</form>
您能否提供一个提交按钮被禁用的示例?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。