Question

这里我有一个图片上传机制。它的目的是接受一个图像并在id = imageholder的div中显示它。我的问题是如果我在我的表单中有这个图像持有者div，它会给出上传错误（4）。所以我得到一个空的$ _FILES数组。但如果我省略它，我会得到一个填充的$ _FILES数组。但是我需要在表单中使用div作为设计目的。我怎么能摆脱这种情况。

with imagehoder div in form：

没有图像持有者div：

代码似乎很长。但这些都与问题无关。它通常用于验证mime类型

完整代码：

<?php  print_r($_FILES);?>
<html>
<body>
<form method='post' enctype='multipart/form-data' action="<?php echo $_SERVER['PHP_SELF'] ?>">
<div id='photouploder'>

   <div id='imagehoder'></div> // creating problem

   <div class="inputWrapper">upload image
       <input class="fileInput" id='up' type="file" name="image"/>
   </div>
</div>
<input type='submit' value='submit'>
</form>
<script>
    var imageholder=document.getElementById('imageholder');

function getBLOBFileHeader(url, blob, callback,callbackTwo) {


    var fileReader = new FileReader();
    fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {

        header += arr[i].toString(16);

    }
    var imgtype= callback(url, header);// headerCallback

    callbackTwo(imgtype,blob)

    };

    fileReader.readAsArrayBuffer(blob);

}



function headerCallback(url, headerString) {

  var info=getHeaderInfo(url, headerString);
  return info;

}

function getTheJobDone(mimetype,blob){

    var mimearray=['image/png','image/jpeg','image/gif'];
    console.log('mimetype is :'+mimetype);
    if(mimearray.indexOf(mimetype) !=-1){
        printImage(blob);
    }else{
        document.getElementById('up').value='';
         while (imageholder.firstChild) {
                  imageholder.removeChild(imageholder.firstChild);
             } 
        console.log('you can not upload this file type');
    }
}

function remoteCallback(url, blob) {


    getBLOBFileHeader(url, blob, headerCallback,getTheJobDone);

}

function printImage(blob) {
  // Add this image to the document body for proof of GET success
  var fr = new FileReader();
  fr.onloadend = function(e) {
     var img=document.createElement('img');
     img.setAttribute('src',e.target.result);
     img.setAttribute('style','width:100%;height:100%;');
     imageholder.appendChild(img);
  };

  fr.readAsDataURL(blob);

}


function mimeType(headerString) {

  switch (headerString) {

    case "89504e47":
      type = "image/png";
      break;
    case "47494638":
      type = "image/gif";
      break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      type = "image/jpeg";
      break;
    default:
      type = "unknown";
      break;
  }

  return type;
}

function getHeaderInfo(url, headerString) {

    return( mimeType(headerString));

}


// Check for FileReader support
function fileread(event){

  if (window.FileReader && window.Blob) {


  /* Handle local files */
        var mimetype;
        var mimearray=['image/png','image/jpeg','image/gif'];

        var file = event.target.files[0];



             if(mimearray.indexOf(file.type)===-1 || file.size >= 2 * 1024 * 1024){
                while (imageholder.firstChild) {
                  imageholder.removeChild(imageholder.firstChild);
                } 
                document.getElementById('up').value='';
                console.log("you can't upload this file type");
                file=null;
                return false;   

             }else{

                while (imageholder.firstChild) {
                  imageholder.removeChild(imageholder.firstChild);
                } 
                document.getElementById('up').value='';
                remoteCallback(file.name, file);

             }
        }else {
     // File and Blob are not supported
            console.log('file and blob is not supported');
       } /* Drakes, 2015 */



  } 

    document.getElementById('up').addEventListener('change',fileread,false);
</script>
</body>
</html>

Answer 1

首先： HTML属性值应始终用双引号封装。

其次，这是使用html5 API读取文件的正确示例，如您所尝试的：（另请查看文档：{{3}}）

window.onload = function() {

    var fileInput = document.getElementById('up');
    var fileDisplayArea = document.getElementById('imagehoder');


    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerHTML = "";

                var img = new Image();
                img.src = reader.result;

                fileDisplayArea.appendChild(img);
            }

            reader.readAsDataURL(file);
        } else {
            fileDisplayArea.innerHTML = "File not supported!"
        }
    });

}

<body>
    <form method="post" enctype='multipart/form-data' action="<?php echo $_SERVER['PHP_SELF'] ?>">
        <div id="photouploder">

            <div id="imagehoder"></div>

            <div class="inputWrapper">upload image
                <input class="fileInput" id="up" type="file" name="image" />
            </div>
        </div>
        <input type="submit" value="submit">
    </form>
</body>

Answer 2

我不确定你问题中的'设计目的'。如果'设计目的'意味着UI设计（CSS相关），那么可能这个原因并不成立，因为它们完全无关紧要。

此外，文件上传技术现在非常成熟。有各种语言的开源工具，经过充分测试和易于使用我强烈建议您在实施之前先看一下它们。

用于图像显示的div在上传文件时造成困难;

2 个答案: