<head>
<meta charset="UTF-8">
</head>
<input type="file" id="fileup" />
<form action="http://localhost:8080/alert/sendMail.action">
<input type="hidden" name="base64" id="file_base64" />
<input type="input" name="fileName" id="fileName" />
<img src="" id="img" alt="请选择图片">
</form>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#fileup").change(function(){
var reader = new FileReader();
var $this = $(this);
reader.readAsDataURL(this.files[0]);
/*
readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,
后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。
*/
reader.onload = function(e){
$('#file_base64').val(e.target.result);
$('#img').attr("src",e.target.result);
var arr = $this.val().split("\\");
console.log(arr)
$('#fileName').attr("value",arr[arr.length-1]);
};
});
});
</script>
<div class="row">
<div class="col"><input id="FilesWithTen" type="file" multiple="multiple"/></div>
</div>
<script>
$(function() {
$("#FilesWithTen").change(function() {
var files = this.files;
if (files && files.length > 10) {
alert("超过10");
this.value = "" //删除选择
// $(this).focus(); //打开选择窗口
}
})
})
</script>
<script>
$(function() {
$("#FilesWithTen").change(function() {
var temp = [];
var files = this.files;
if (files && files.length > 10) {
//Array.prototype.push.apply(temp, files);
for (var i = 0; i < 10; i++) {
temp.push(files[i]);
}
this.value = ""; //因为files =》 FileList是只读的,所以不能直接修改input type=file 的值,
//只能置null,所以只能通过js提交action,简单的方式就是超过10个,置null,用户在选择一次
$.ajax({
url: 'action',
type: 'post',
data: new FormData().append("s",temp),
success: function(rs) {
}
})
}
})
})
</script>