首先,看了这篇博客的朋友,知道了如何图片上传预览功能:
http://www.cnblogs.com/Shmily-HJT/p/7715756.html
但是,问题很严峻,我们能预览了,我们却无法得到每一个的input标签选择的文件,我们预览的功能是一个input标签不停选择不同照片,然后再将此照片路径通过一些方法的赋值给相应的Img标签的src属性,以此达到目的,细心的朋友会发现,我们如果要上传这些照片给服务器怎么办?
迫于知识局限,目前作为小白的我,也只能想到一个通过html和css布局的一个方法去解决。
这个方法很简单,在图片上传预览之前,我们会点击如下这个被一张图片给覆盖的input标签。
每点击选择相应照片,会预览显示在网页上
接下来便是重点,与前一篇博客有所不同的是,我们每点击确定选择一张照片后,我们将该input标签给display:none;掉,然后利用js的dom添加,再新创建一个input标签放在该位置。效果如下:
这样的话便能实现照片上传之前预览,同时还可以准确上传给服务器。