上传多个图片撤销问题

htmljavascript

解决方案 »

  1.   

    你放一个x，点击x，就删除哪个啊，是一个file数组
      

  2.   

    试过，不好使。show me your code
      

  3.   

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
      var files = null;
      function fileSelected() {
      document.getElementById('preview').innerHTML="";
    files = document.getElementById('fileToUpload').files;
    if (files) {
    for(var i = 0,f;f=files[i];i++){
    var reader = new FileReader(), htmlImage;
    reader.onload = (function(file){
    return function(e) {
    htmlImage = '<div><img src="'+ e.target.result +'" /><a href="javascript:;" f="' + file.name + '" onclick="deleteFile(this)">删除</a></div>';
    document.getElementById('preview').innerHTML += htmlImage;
    }
    })(f);
    reader.readAsDataURL(f);
    }
    }
      }
    var deletedFile = [];
    function deleteFile(obj){
    obj.parentNode.parentNode.removeChild(obj.parentNode);
    deletedFile.push(obj.getAttribute("f"))
    }
    function uploadFile(){
     alert("上传的时候请删除这些文件：" + deletedFile);
    }
    </script>
    </head>
    <body>
    <form id="form1" enctype="multipart/form-data" method="post" action="upload.do">
    <div class="row">
    <label for="fileToUpload">选择文件：</label>
    <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" multiple="multiple"/>
    </div>
    <input type="button" onclick="uploadFile()" value="Upload" />
    <div id="preview"></div>
    </form>
    </body>
    </html>
      

  4.   


    恩，做到这步，删不掉var files=fileToUpload.files;
     for(var i in files){
      for(var j in deletedFile){
      if(files[i].name==deletedFile[i]){
      delete files[i];
      }
      }
      console.log(files[i].name);
     }
     console.log(files.length);
      

  5.   

    fileToUpload.files是只读的，你不能删除的。你可以删除预览，再上传的时候判断文件名，删除掉的文件进行Abort上传
      

  6.   

    支持multiple的file类型一般也支持HTML5的FormData对象，直接用FormData+ajax来上传文件搞定。或者如#5老大说的，用一个隐藏的hidden域存储要删除的文件下标，服务器不保存已经存储的下标。多个同名的file对象也可以。