前端上传多张图片，编译发给后端

今天分享一个找上传多张图片的方法，使用于网页，移动端。

HTML页面

<fieldset>

  <legend>浏览图片文件：</legend>

  <input type='file' name='fleUpload' id='fleUpload' οnchange='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页面没有显示，不要忘记添加。。