2015-08-13 6 views
1

Я хочу спросить о том, как удалить значения файлов изображений перед загрузкой. Проблема для меня - когда я удаляю одно изображение файла, файл типа ввода не удаляет значение, после чего я нажимаю кнопку send в php-код он все еще показывает все файлы.Удалить значение типа ввода multiplefile

\t window.onload = function(){ 
 
     
 
    //Check File API support 
 
    if(window.File && window.FileList && window.FileReader) 
 
    { 
 
     var filesInput = document.getElementById("files"); 
 
     
 
     filesInput.addEventListener("change", function(event){ 
 
      
 
      var files = event.target.files; //FileList object 
 
      var output = document.getElementById("result"); 
 
      
 
      for(var i = 0; i< files.length; i++) 
 
      { 
 
       var file = files[i]; 
 
       
 
       //Only pics 
 
       if(!file.type.match('image')) 
 
        continue; 
 
       
 
       var picReader = new FileReader(); 
 
       
 
       picReader.addEventListener("load",function(event){ 
 
        
 
        var picFile = event.target; 
 
        
 
        var div = document.createElement("div"); 
 
        
 
        div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + 
 
          "title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>"; 
 
        
 
        output.insertBefore(div,null); 
 
        div.children[1].addEventListener("click", function(event){ 
 
         div.parentNode.removeChild(div); 
 

 
        });   
 
       
 
       }); 
 
       
 
       //Read the image 
 
       picReader.readAsDataURL(file); 
 
      }        
 
      
 
     }); 
 
    } 
 
    else 
 
    { 
 
     console.log("Your browser does not support File API"); 
 
    } 
 
}
\t body{ 
 
    font-family: 'Segoe UI'; 
 
    font-size: 12pt; 
 
} 
 

 
h1{ 
 
    font-size:12pt; 
 
    color: #fff; 
 
    background-color: #1BA1E2; 
 
    padding: 20px; 
 

 
} 
 
article 
 
{ 
 
    width: 80%; 
 
    margin:auto; 
 
    margin-top:10px; 
 
} 
 

 

 
.thumbnail{ 
 

 
    height: 100px; 
 
    margin: 10px;  
 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>More file uploads</title> 
 

 

 
</head> 
 

 
<body> 
 
\t <h1>Select multiple files</h1> 
 
    <article> 
 
\t <form action="#" method="post" enctype="multipart/form-data"> 
 
     <input id="files" type="file" name="files[]" multiple/> 
 
     <output id="result" /> 
 
\t \t <input type="submit" name="btnsubmit" value="Send"/> 
 
\t </form> 
 
\t </article> 
 
\t 
 
    <?php 
 
    if(isset($_POST['btnsubmit'])){ 
 
\t var_dump($_FILES['files']['name']); 
 
\t } 
 
    ?> 
 
</body> 
 
</html>

+0

пожалуйста посмотрите эту Http: // stackoverflow.com/questions/9337793/remove-selected-files-before-upload-with-javascript –

ответ

0

Я видел код, я думаю, что код раздувом просто удалить DIV, но не изменить $_FILES

div.children[1].addEventListener("click", function(event){ 
    div.parentNode.removeChild(div); 
}); 
+0

Благодарим за идею поделиться! – Andy

Смежные вопросы