jquery - форма загрузки нескольких изображений с опцией удаления

Question

jquery - форма загрузки нескольких изображений с опцией удаления

0

Мне нужны некоторые предложения относительно формы загрузки изображений, например facebook и tumblr, которые могут просматривать несколько изображений с заголовками и полями описания с каждым изображением, и если пользователь хочет удалить любое изображение перед загрузкой, он может это сделать. Поэтому, пожалуйста, предложите мне, как это сделать. Я пробовал это, но у меня проблема с удалением изображения из input type = file, так как он только что прочитан. Я сталкиваюсь с проблемой, когда я отправляю форму на сервере. Пожалуйста, дайте мне свои идеи, я действительно нуждаюсь в помощи, у меня есть крайний срок в этом месяце, я сильно застрял в этой проблеме. Я использую php и jquery. Примечание. Пожалуйста, не предлагайте никаких плагинов.

Заранее спасибо.

Aisha 28 март 2014, в 19:13

Источник

Теги:

php

jquery

1 ответ

Ещё вопросы

Uday A. Navapara · Answer 1 · 2014-05-20T05-29-00.000Z

У меня такая же проблема, как и вы

теперь я нашел решение для этого, я думаю, это будет полезно для вас, чтобы решить вашу проблему

 <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>