jquery - 多個圖像上傳形式與刪除選項

我想要一些關於圖像上傳形式像Facebook和tumblr的建議，可以預覽多個圖像與標題和描述字段與每個圖像，如果用戶想要刪除任何圖像上傳之前，他可以要做到這一點。所以請建議我如何實現這一點，我試過這個，但我有問題，從輸入類型=文件中刪除圖像，因爲它是只讀我正面臨問題，當我提交表單在服務器上。請給我你的想法，我真的需要幫助，我有這個月的截止日期，我嚴重陷入這個問題。我使用PHP和jQuery。 注意：請不要建議任何插件。jquery - 多個圖像上傳形式與刪除選項

在此先感謝。

來源

2014-03-28 Aisha

我臉上有同樣的問題，像你

爲此，我認爲這將是有益的爲您解決您的問題，現在我已經找到解決方案

<input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput--> 
<div id="#filelist"></div> 
<script> 
    var selDiv = ""; 
    var storedFiles = []; //store the object of the all files 

    document.addEventListener("DOMContentLoaded", init, false); 

    function init() { 
     //To add the change listener on over file element 
     document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false); 
     //allocate division where you want to print file name 
     selDiv = document.querySelector("#filelist"); 
    } 

    //function to handle the file select listenere 
    function handleFileSelect(e) { 
     //to check that even single file is selected or not 
     if(!e.target.files) return;  

     //for clear the value of the selDiv 
     selDiv.innerHTML = ""; 

     //get the array of file object in files variable 
     var files = e.target.files; 
     var filesArr = Array.prototype.slice.call(files); 

     //print if any file is selected previosly 
     for(var i=0;i<storedFiles.length;i++) 
     { 
      selDiv.innerHTML += "<div class='filename'> <span class='removefile' data-file='"+storedFiles[i].name+"'> " + storedFiles[i].name + "</span></div>"; 
     } 
     filesArr.forEach(function(f) { 
      //add new selected files into the array list 
      storedFiles.push(f); 
      //print new selected files into the given division 
      selDiv.innerHTML += "<div class='filename'> <span class='removefile' data-file='"+storedFiles[i].name+"'> " + f.name + "</span></div>"; 
     }); 

     //store the array of file in our element this is send to other page by form submit 
     $("input[name=replyfiles]").val(storedFiles); 
} 

//This function is used to remove the file form the selection 
function removeFile(e) { 
     var file = $(this).data("file"); //To take the name of the file 

     for(var i=0;i<storedFiles.length;i++) { //for find the file from the array 
      if(storedFiles[i].name === file) { 
       storedFiles.splice(i,1); //remove file from the list 
       break; 
      } 
     } 

     //now store the list of the all remaining file in our element name which will submit with the form 
     $("input[name=replyfiles]").val(storedFiles);  
     $(this).parent().remove(); 
} 

$(document).ready(function(){ 
    $("body").on("click", ".removefile", removeFile); 
}) 
</script>

來源

2014-05-20 06:59:51

jquery - 多個圖像上傳形式與刪除選項

回答

相關問題