div用於圖像顯示，導致上傳文件時遇到困難；

Question

在這里，我有一個圖像上傳機制。 目的是接受圖像並將其顯示在具有id = imageholder的div中。 我的問題是，如果我的表單中包含此圖像持有人div，則會出現上傳錯誤（4）。 所以我得到一個空的$ _FILES數組。 但是如果我省略它，我會得到一個填充的$ _FILES數組。但是我需要在表單內部使用該div來進行設計。 我如何能逃脫這種情況。

與imagehoder div內部形式：

沒有imageholder 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讀取文件的正確示例，就像您嘗試過的一樣：（還請查看文檔： https : //developer.mozilla.org/en-US/docs/Web/API/FileReader ）

 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 個解決方案

解決方案1
2 2015-12-16 04:53:21

解決方案2
0 2015-12-16 05:32:18

div用於圖像顯示，導致上傳文件時遇到困難；

問題描述

2 個解決方案

解決方案1 2 2015-12-16 04:53:21

解決方案2 0 2015-12-16 05:32:18

解決方案1
2 2015-12-16 04:53:21

解決方案2
0 2015-12-16 05:32:18