Shmily-HJT

首先,看了这篇博客的朋友,知道了如何图片上传预览功能:

http://www.cnblogs.com/Shmily-HJT/p/7715756.html

 

但是,问题很严峻,我们能预览了,我们却无法得到每一个的input标签选择的文件,我们预览的功能是一个input标签不停选择不同照片,然后再将此照片路径通过一些方法的赋值给相应的Img标签的src属性,以此达到目的,细心的朋友会发现,我们如果要上传这些照片给服务器怎么办?

 

迫于知识局限,目前作为小白的我,也只能想到一个通过html和css布局的一个方法去解决。

 

这个方法很简单,在图片上传预览之前,我们会点击如下这个被一张图片给覆盖的input标签。

 

每点击选择相应照片,会预览显示在网页上

 

接下来便是重点,与前一篇博客有所不同的是,我们每点击确定选择一张照片后,我们将该input标签给display:none;掉,然后利用js的dom添加,再新创建一个input标签放在该位置。效果如下:

 

这样的话便能实现照片上传之前预览,同时还可以准确上传给服务器。

分类:

技术点:

相关文章: