【问题标题】:jquery - multiple image upload form with remove optionjquery - 带有删除选项的多张图片上传表单
【发布时间】:2014-03-28 17:21:06
【问题描述】:

我想要一些关于图片上传表单的建议,比如 facebook 和 tumblr,它们可以预览多张带有标题和描述字段的图片,如果用户想在上传之前删除任何图片,他可以这样做。所以请建议我如何实现这一点,我已经尝试过了,但是我在从输入类型 = 文件中删除图像时遇到问题,因为它是 readonly 我在服务器上提交表单时遇到问题。请给我你的想法我真的需要帮助我有这个月的最后期限我严重陷入了这个问题。我正在使用 php 和 jquery。 注意:请不要推荐任何插件。

提前致谢。

【问题讨论】:

    标签: php jquery


    【解决方案1】:

    我也遇到了和你一样的问题

    现在我找到了解决方案,我认为这对您解决问题很有用

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-09-27
      • 2021-04-23
      • 1970-01-01
      • 2016-09-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-07-22
      相关资源
      最近更新 更多