Html5实现单张、多张图片上传功能

$input.removeAttr("id"); var newInput ='<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">'; $(this).append($(newInput));

最后完整JS代码如下：

var intP = 0; $("#btnClubImg").click(function() { var $input = $("#ClubImagesUpload"); // console.log($input); $input.on("change", function () { // console.log(this); var files = this.files; var length = files.length; if (intP > 8) { layer.msg('图片不能再多了～', {}); return; } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image/w+$/.test(file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('图片不能再多了～', {}); return; } if (key == 0 && intP == 0) { console.log(this.result); $("#clubInputImagePreview").css("background-image", "url(" + this.result + ")"); $("#clubInputImagePreview") .append( "<img src='http://www.jb51.net/Images/registerNewSite/btn_r_del.png' />"); $("#clubInputImagePreview").after( "<div></div>"); } else { $("#clubInputImagePreview" + parseInt(intP) + "").css("background-image", "url(" + this.result + ")"); $("#clubInputImagePreview" + parseInt(intP) + "").append( "<img src='http://www.jb51.net/Images/registerNewSite/btn_r_del.png' />"); $("#clubInputImagePreview" + parseInt(intP) + "").after( "<divclass='col-sm-9 img-preview img-preview-sm delImg' ></div>"); } if (key == 0 && intP == 0) { $("#ImgRemove").click(function () { $(this).parent().remove(); }); } else { $("#ImgRemove" + parseInt(parseInt(1) + parseInt(intP)) + "").click(function () { $(this).parent().remove(); }); } intP += parseInt(1); }; fileReader.readAsDataURL(value); } else { layer.msg("格式错误<br/>请选择一个图片文件"); } }); }); $input.removeAttr("id"); var newInput = '<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">'; $(this).append($(newInput)); });

总结

以上所述是小编给大家介绍的Html5实现单张、多张图片上传功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！?

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!