HTML 文件选择事件

2020/11/14 15:22 · javascript ·  · 0评论

假设我们有以下代码:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

结果是:

该图显示了浏览和上传按钮

当用户单击“浏览...”按钮时,将打开一个文件搜索对话框:

该图显示了选中文件的文件搜索对话框

用户将通过双击文件或单击“打开”按钮来选择文件。

选择文件后是否有一个Javascript事件可以通知我?

收听更改事件。

input.onchange = function(e) { 
  ..
};

当您必须重新加载文件时,可以擦除输入的值。下次添加文件时,将触发“ on change”事件。

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

jQuery方式:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

即使单击取消,也会调用Change事件。

这就是我使用纯JS的方式:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});
#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}
<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>
本文地址:http://javascript.askforanswer.com/html-wenjianxuanzeshijian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!