<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>
input批量上传照片
最新推荐文章于 2023-11-24 12:49:57 发布