input標籤圖片上傳預覽（二）————上傳照片給服務器

首先，看了這篇博客的朋友，知道了如何圖片上傳預覽功能：

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

 

可是，問題很嚴峻，咱們能預覽了，咱們卻沒法獲得每個的input標籤選擇的文件，咱們預覽的功能是一個input標籤不停選擇不一樣照片，而後再將此照片路徑經過一些方法的賦值給相應的Img標籤的src屬性，以此達到目的，細心的朋友會發現，咱們若是要上傳這些照片給服務器怎麼辦？

 

迫於知識侷限，目前做爲小白的我，也只能想到一個經過html和css佈局的一個方法去解決。

 

這個方法很簡單，在圖片上傳預覽以前，咱們會點擊以下這個被一張圖片給覆蓋的input標籤。

 

每點擊選擇相應照片，會預覽顯示在網頁上

 

接下來即是重點，與前一篇博客有所不一樣的是，咱們每點擊肯定選擇一張照片後，咱們將該input標籤給display:none;掉，而後利用js的dom添加，再新建立一個input標籤放在該位置。效果以下：

 

這樣的話便能實現照片上傳以前預覽，同時還能夠準確上傳給服務器。