1. 程式人生 > >前端上傳多張圖片,編譯發給後端

前端上傳多張圖片,編譯發給後端

今天分享一個找上傳多張圖片的方法,使用於網頁,移動端。

HTML頁面

<fieldset>

  <legend>瀏覽圖片檔案:</legend>

  <input type='file' name='fleUpload' id='fleUpload' onchange='fleUpload_PrevImageFile(this.files)' multiple='multiple'>

  <ul id='ulUpload'></ul>

</fieldset>


JS頁面

<script>

  function fleUpload_PrevImageFile(f){

    if(typeof FileReader == 'undefined'){ alert('瀏覽器不支援') }

  }

  var strHTML = '';

  for(var intI=0;intI< f.length;intI++){

     var tmpFile = f[intI];

     var reader = new FileReader();

     reader.readAsDateURL(tmpFile);

     reader.onload = function(e){

       strHTML = strHTML+ '<span>';

        strHTML = strHTML+ ' <img src='   '+e.target.result  '  '   alt=''/> '

         strHTML = strHTML+ '</span>'

         document.getElementById('ulUpload').innerHTML = '<li>'+ strHTML +'</li>'

       }

    }

   $(document).ready(function(){

     $('.btn').click(function(){

        var ulArray = $('li>span');

        var imgArray= [];

       for(var ind=0;ind<ulArray.length;ind++){

          var img = $('li span img')[ind].src;

          imgArray.push(img);

         }

      })

    })

</script>


以上就是上傳多張圖片的例項,js部分獲取一個按鈕,html頁面沒有顯示,不要忘記新增。。