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

这样，你就可以得到一个简易的图片上传的Demo了，但是并不是最终的，因为你还需要加很多业务进去。比如：得到一张预览图片后，当前标签会被占用，如果下次循环进来，直接使用原标签，肯定会将之前的图片替换，那这肯定不是我们想要的效果，我们希望是能依次展示，而不是替换展示。所以，我们还需要做一些处理：

$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")"); //使用apend再当前元素下追加一个子节点 $("#clubInputImagePreview") .append("<img src='http://www.jb51.net/Images/registerNewSite/btn_r_del.png' />"); //使用after 向当前兄弟节点 追加一个同级节点 $("#clubInputImagePreview").after( "<div ></div>");

然后我们追加的删除图片，也需要给其点击事件，让我们的当前预览区域消失：

$("#ImgRemove").click(function () { $(this).parent().remove(); });

最后，你会发现结果还不是我们想要的，那是因为 当前ID还在，所以无法进行下一步操作，而我们只需要将当前元素的Id Remove掉，然后新增一个同ID的元素，这样浏览器就会认为这是一个新的元素：

（编辑：厦门网）

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