PHP Javascript - 無法更改選擇器onclick去除預覽文件

我正在上傳多個文件（使用<input type="file" multiple/>）與預覽圖像文件，並可以刪除圖像預覽和filedata成功。PHP Javascript - 無法更改選擇器onclick去除預覽文件

但問題是，我不能改變onclick選擇器刪除filedata。（如果我更改到其他選擇，它只會刪除預覽圖像，但文件仍然被上傳到我的文件夾）

用於點擊該選擇移除工作成功是.selFile但是當我想改變選擇器點擊到.selFile2它不會刪除filedata）

這些是我的重點代碼行。（要看到我的完整代碼，請看看在底部）

var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' 
title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>";

我從

$("body").on("click", ".selFile", removeFile);

改變

$("body").on("click", ".selFile2", removeFile);

但它刪除預覽圖像只不刪除filedata（它仍然會上傳到我的文件夾） ..

我試着將function removeFile(e) 中的代碼從var file = $(this).data("file");更改爲var file = $('.selFile).data("file");結果是它只能刪除1個filedata。 ... 我該怎麼辦？

這裏是我的全部代碼（共2頁）

firstpage.html（我使用AJAX來投遞表單）

<!doctype html> 
<html> 
<head> 
<title>Proper Title</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<style> 
    #selectedFiles img { 
     max-width: 200px; 
     max-height: 200px; 
     float: left; 
     margin-bottom:10px; 
     cursor:pointer; 
    } 
</style> 
</head> 

<body>  
    <form id="myForm" method="post"> 
     Multiple Files: <input type="file" id="files" name="files[]" multiple><br/> 

     <div id="selectedFiles"></div> 

     <input type="submit"> 
    </form> 

    <script> 
    var selDiv = ""; 
    var storedFiles = []; 

    $(document).ready(function() { 
     $("#files").on("change", handleFileSelect); 

     selDiv = $("#selectedFiles"); 
     $("#myForm").on("submit", handleForm); 

     $("body").on("click", ".selFile", removeFile); 
    }); 

    function handleFileSelect(e) { 
     var files = e.target.files; 
     var filesArr = Array.prototype.slice.call(files); 
     filesArr.forEach(function(f) {   

      if(!f.type.match("image.*")) { 
       return; 
      } 
      storedFiles.push(f); 

      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>"; 
       selDiv.append(html); 

      } 
      reader.readAsDataURL(f); 
     }); 

    } 

    function handleForm(e) { 
     e.preventDefault(); 

     var data = new FormData(); 

     for(var i=0, len=storedFiles.length; i<len; i++) { 
      data.append('files[]', storedFiles[i]); 
     } 

     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'upload.php', true); 

     xhr.onload = function(e) { 
      if(this.status == 200) { 
       console.log(e.currentTarget.responseText); 
       alert(e.currentTarget.responseText + ' items uploaded.'); 
      } 
     } 

     xhr.send(data); 
    } 

    function removeFile(e) { 
     var file = $(this).data("file"); 
     for(var i=0;i<storedFiles.length;i++) { 
      if(storedFiles[i].name === file) { 
       storedFiles.splice(i,1); 
       break; 
      } 
     } 
     $(this).parent().remove(); 
    } 
    </script> 

</body> 
</html>

.. upload.php的頁面

<?php 
    for($i=0;$i < count($_FILES["files"]["name"]);$i++) 
     { 
      if($_FILES["files"]["name"][$i] != "") 
      {  
       $tempFile = $_FILES['files']['tmp_name'][$i];      

       $targetFile = "upload/". $_FILES["files"]["name"][$i]; 

       move_uploaded_file($tempFile,$targetFile);  
      } 
     } 
?>

來源

2016-12-30 doflamingo

無法重現。 – guest271314

它是因爲當瀏覽器收聽click事件的.selFile2元素時，img標記成爲的兄弟（.selFile2）。

一旦你委託點擊事件到span標籤，$("body").on("click", ".selFile2", removeFile);

你只需要修改removeFile功能有點像下面。

function removeFile(e) { 
    var img = e.target.parentElement.querySelector("img"); 
    var file = img.getAttribute('data-file'); 
    for(var i=0;i<storedFiles.length;i++) { 
     if(storedFiles[i].name === file) { 
      storedFiles.splice(i,1); 
      break; 
     } 
    } 
    $(this).parent().remove(); 
}

我剛剛測試過代碼，並且它正在處理我的問題。

來源

2016-12-30 01:15:54 Eddie

PHP Javascript - 無法更改選擇器onclick去除預覽文件

回答

相關問題