H5图片回显 加 图片数量限制


<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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值