2013-02-09 47 views
0

我想要一個表單,包含多個部分。如何使用預覽創建圖像上傳器

第一部分將是圖像,多個文件上傳並在實際上傳圖像之前預覽圖像。

第二部分有各種文本表單域。

我有第二部分內置工作正常,使用PHP和MySQL,並且圖像上傳也在工作。但我不知道如何在提交表單前顯示圖像的預覽。使用

代碼形式的答案:

編輯

 <input type='file' onchange="readURL(this);" /> 
    <img id="blah" src="#" alt="your image" /> 

有:

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah') 
        .attr('src', e.target.result) 
        .width(150) 
        .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

的偉大工程,但它只能顯示1個縮略圖。我想爲每個文件動態創建一個圖像縮略圖。

我想:

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      var container = $('#previews'); 
      var image = $('<img>').attr('src', e.target.result).width(150); 
      image.appendTo(container); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

有:

<input type='file' name="files[]" onchange="readURL(this);" multiple /> 
    <div id="previews"></div> 

其工作原理,但我怎麼循環它爲每個文件輸入?

+0

只要新的參數添加到函數,像平變化=「readURL(此,0)[或i的一個循環],相同的標識符添加到div函數調用輸入字段(如「previews0」或「previews」+ $ i,;;;;;;;;;;;;;;;;;;) 在JS,添加到函數名稱「功能readURL(輸入,k)的」,並將它傳遞到波紋管圖像的格ID,如「預覽」 + K 參數;;;;;; 你完成了。 – 2016-03-22 08:19:48

回答

0

你不能在服務器上具有圖像之前顯示預覽,但如果你使用的Java接口

+0

或閃光燈......但現在看起來這是可能的,請看我的答案! – 2013-02-09 20:37:18