input批量上传照片

最新推荐文章于 2023-09-13 10:03:21 发布

专注echarts研发20年

最新推荐文章于 2023-09-13 10:03:21 发布

阅读量869

点赞数

本文链接：https://blog.youkuaiyun.com/abcmaopao/article/details/80080817

版权

<html>
<head>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
    <input type="file" id="image" capture="camera" accept="image/jpeg" multiple="multiple"/>
</div>
<div id="images">
</div>
<script>
var count = 0;
var files = [];
var reader = new FileReader();
var AllowImgFileSize = 787500; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败 2100000
var images = [];
function upload(){
      images = [];
      count = 0;
        files = $("#image")[0].files;
      readImg();
    }
function readImg(){
   var file = files.item(count);
   if (file) {
      //将文件以Data URL形式读入页面  
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
            alert(files.item(count).name+ '上传失败，请上传不大于750K的图片！');
            return;
         }else{
            images[count] = {name:files.item(count).name,code:reader.result}
            count++;
            readImg(files);
         }
      }
    }else{
      count = 0;
        var html = '';
      for(var i in images){
         html += '<img title="'+images[i].name+'" style="width:150px;height:150px;margin:10px;" src="'+images[i].code+'">';
      }
        $("#images").html(html);
    }
}
    $(function(){
        $("#image").change(function(){
            upload();
        });
    })
</script>
</body>
</html>