图片上传，一次选取多张图片上传前预览问题

Question

php写的图片上传，一次性选取多张图片 无法生成预览图，选取一张没问题。

Answer 1

<form name="form5" id="form5" method="post" action="#">
 <input id="fileid" type="file" name="filename[]" multiple="multiple" onchange="preview5()"/>
 
</form>
<script type="text/javascript">function preview5(){  var x = document.getElementById("fileid"); //读取ID的第一个对象  if(!x || !x.value) return;  var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;  if(patn.test(x.value)){    var y = document.getElementById("img5");    if(y){
      y.src = 'file://localhost/' + x.value;
    }    else{
      var img=document.createElement('img');
      img.setAttribute('src','file://localhost/'+x.value);
      img.setAttribute('width','120');
      img.setAttribute('height','90');
      img.setAttribute('id','img5');
      document.getElementById('form5').appendChild(img);
    }
  }
  
  else{
    alert("您选择的似乎不是图像文件。");
  }}
</script>

Answer 2

知道是<input   id="fileid" type="file" name="filename[]"> 这个位置的数问题， 跟document.getElementById("fileid");只读取了第一个对象。   有没有什么方法解决吗？？

Answer 3

还有一个问题 无法预览的是png格式的图片  是什么原因呢 

Answer 4

plupload插件全满足你需求

Answer 5

你用document.getElementsByName("filename"); 然后把他console.log     在浏览器调试f12看看console.log是否有输出。

Answer 6

实现选择图片之后生成预览图<script type="text/javascript">
    //下面用于多图片上传预览功能
    function setImagePreviews() {
        //获取选择图片的对象
        var docObj = document.getElementById("filesid");
        //后期显示图片区域的对象
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        //得到所有的图片文件
        var fileList = docObj.files;
        var patn = /\.jpg$|\.png$|\.jpeg$|\.gif$/i;
        //图片张数判断
        if (fileList.length>6) {  
            alert("不要超过6张");
            clearInputFile(docObj);//清空file
        }
        //图片格式的判断
        if(!patn.test(docObj.value)){
                alert("请重新选择,注意格式");
                clearInputFile(docObj);
            }
        //循环遍历
        for (var i = 0; i < fileList.length; i++) {    
            //动态添加html元素        
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img"+i);             if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '120px';
                imgObjPreview.style.height = '90px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   //获取上传图片文件的物理路径
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
               //必须设置初始大小
                localImagId.style.width = "120px";
                localImagId.style.height = "90px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }  
        return true;
    }    //清空form，赋值一个空的按钮 
    function clearInputFile(f){  
    if(f.value){  
        try{  
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...  
        }catch(err){  
        }  
        if(f.value){ //for IE5 ~ IE10  
            var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;  
            form.appendChild(f);  
            form.reset();  
            p.insertBefore(f,ref);  
        }  
    }  
}  </script>