js文件上传及删除

Question

在网上找了一个类似邮箱里附件上传的代码，但删除时只能删除div层，无法删除之前上传到指定文件夹的文件，求解！！！
附上代码如下：
js：    var path="UserControls/"//删除按钮路径
    var inputCount=1;//控件个数，实际上传数少一个， 
    var Allupfiled=0;//总共上传
    var Endupfiled=0;//已上传
    
    var ua = navigator.userAgent.toLowerCase(); //浏览器信息
    var info = {    
            ie: /msie/.test(ua) && !/opera/.test(ua),        //匹配IE浏览器    
            op: /opera/.test(ua),     //匹配Opera浏览器    
            sa: /version.*safari/.test(ua),     //匹配Safari浏览器    
            ch: /chrome/.test(ua),     //匹配Chrome浏览器    
            ff: /gecko/.test(ua) && !/webkit/.test(ua)     //匹配Firefox浏览器
            };    
    window.onload=SetClick;//加载完成，添加一个控件
    function SetClick()
    {
   
        //if(inputCount>=10)
        //{
            //alert("附件个数不能超过10个!");
            //return;
        //}
     var container=document.getElementById("fileUpArea");
        var input1=document.createElement("input");
    input1.type="file";
    //input1.name="file"+inputCount;
    input1.name="filesupload";
    input1.id="file"+inputCount;
    input1.className="fileinput";
    input1.onchange=function(event)
    {
        if(this.value)
        {
           var k=this.value.lastIndexOf("\\");
           var str=this.value.substring(k+1);
           var divs=document.getElementById("filetxt").getElementsByTagName("div");
           var check=false;            for(var i=0;i<divs.length;i++)
           {
             if(divs[i].innerHTML.indexOf(str)!=-1)   
             {
                  check=true;
                  break;
             }
           }
           if(!check)
           {   
               Allupfiled++;
               SetIframeInput(this,inputCount,str);
           }
           else
           {
               alert("不允许添加同名附件！请重命名！");
               return;
           }
       }
    }
    container.appendChild(input1);
    inputCount++;
    //input1.click();
}
function CheckFileNames(str)
{
    var divs=document.getElementById("filetxt").getElementsByTagName("div");
    var check=false;
          
    for(var i=0;i<divs.length;i++)
    {
        if(/"+str"+/i.test(divs[i].innerHTML))
        {
                  check=true;
                  break;
        }
   }
   
}
function SetIframeInput(input,num,str)//选取值后的file控件，第几个，选取的文件名称
{
    var body = document.body; //页面body
    var name=input.id;//fileName
    var contxt=document.createElement("div");//显示附件名称用的div
    var filetxtDiv=document.getElementById("filetxt");//显示用的div(contxt)的上级div;
    var iframename = "iframe"+name;//框架iframe的名称
    var iframe;//框架
    var form=document.createElement('form');//创建表单
    var statediv=document.createElement("span");//状态div
    var stopdiv=document.createElement("span");//停止按钮
    var jxupdiv;//上传按钮
    var imgs=document.createElement('img');//删除按钮
    var upedfilename;//上传后文件名称
    //var filedNames=document.getElementById("filedName");//显示上传后所有附件名称，后台取值用
    var filedNames=getfiledName();
        if(Endupfiled==0)
        {
            filedNames.value="";
        }
    
    contxt.id=input.id+"text";//显示用的div(contxt)的ID
    contxt.innerHTML=str+"&nbsp;&nbsp;";//contxt的innerHTML（显示内容）
        contxt.className="";
        filetxtDiv.appendChild(contxt);//添加一个显示附件内容的div
        
        imgs.src=path+"images/f2.gif";
        imgs.onclick=Dispose;//删除事件
        contxt.appendChild(imgs);//添加删除按钮
        
        statediv.id="state"+num;
        statediv.className="spanstate";
        statediv.innerHTML="准备上传";
        contxt.appendChild(statediv);//添加状态div     //创建iframe
     iframe = document.createElement( info.ie ? "<iframe name=\"" + iframename + "\">" : "iframe");
if(info.ie)
{
    document.createElement("<iframe name=\"" + iframename + "\">");
}
else
{
    document.createElement("iframe");
}
iframe.name = iframename;
iframe.style.display = "none";
//插入body
body.insertBefore( iframe, body.childNodes[0]);

//设置form
form.name="form"+name;//表单名称
form.target=iframename;
        form.method="post";
        form.encoding="multipart/form-data";
        form.action=path+"Fileup.ashx";
        //form.action="UserControls/CallBack.aspx";
        body.insertBefore( form, body.childNodes[0]);
        
        //添加控件进form
        form.appendChild(input);
        
        SetClick();//重新添加一个upfile控件
    statediv.innerHTML="正在上传";
       
       //添加停止按钮
        stopdiv.id="stopdiv"+num;
        stopdiv.innerHTML="停止";
        stopdiv.style.cursor="hand";
        contxt.appendChild(stopdiv);
        stopdiv.onclick=function()//停止事件
        {
            iframe.src =path+"StopUpLoad.ashx";//无任何处理代码
            window.frames[iframename].location.reload(); //重新刷新iframe终止上传，在 iframe onload事件中处理
            //iframe.location.reload();
        }   
        //定义iframe 的onload事件
        if (info.ie)//IE 需要注册onload事件
        {
             iframe.attachEvent("onload",CallBack);
        } 
        else
        {
           iframe.onload = CallBack;
        }
        
        //提交 --------------------------------------------------
        form.submit();
        //提交完毕-----------------------------------------------
        function CallBack()//iframe加载完成，返回结果处理
        {
             
             try
             {
                      var value =iframe.contentWindow.document.body.innerHTML;
                      upedfilename=value.substring(value.indexOf("@returnstart@")+13,value.indexOf("@returnend@"));
                      if(upedfilename.length>3)//正常上传，返回上传后文件名
                      {
                          //alert(upedfilename); 
                          finished();
                      }
                      else//停止上传，从StopUpLoad.ashx页面返回空值，也可能是返回错误001，000
                      {
                          statediv.innerHTML="等待上传";
                          statediv.style.color="#008080";
                          continueUpLoad();//上传按钮
                      }
              }
              catch(msg)
              {
                   statediv.innerHTML="上传失败";
                   statediv.style.color="#808080";
                   continueUpLoad();//上传按钮
              }
         }
         function continueUpLoad()//上传按钮
         {
             stopdiv.style.visibility="hidden";
             jxupdiv=document.createElement("span");//上传按钮
             jxupdiv.id="jxupdiv"+num;
             jxupdiv.innerHTML="上传";
             jxupdiv.style.cursor="hand";
             contxt.appendChild(jxupdiv);//添加上传按钮
             jxupdiv.onclick=function()//重新上传
             {           
                 contxt.removeChild(jxupdiv);
                 statediv.innerHTML="正在上传";
                 statediv.style.color="#0099FF";     
                 stopdiv.style.visibility="visible";
                 form.submit();//重新提交         
             }
         }
         function Dispose()//删除事件
         {
             //alert("ddd");
             filetxtDiv.removeChild(contxt);
             body.removeChild(form);
             body.removeChild(iframe);
             Allupfiled--;//总上传数减一
             if(upedfilename)
             {
                 if(upedfilename.length>3)
                 {
                     Endupfiled--;
                     if(upedfilename==filedNames.value)
                     {
                         filedNames.value="";
                     }
                     else if(filedNames.value.indexOf(upedfilename)==0)
                     {
                         filedNames.value=filedNames.value.replace(upedfilename+",","");
                     }else{
                         filedNames.value=filedNames.value.replace(","+upedfilename,""); 
                     }
                 }
             }
         }
         function finished()//上传完毕
         {
            statediv.style.color="Green";
        statediv.innerHTML="上传成功";
        contxt.removeChild(stopdiv);
            if(filedNames.value=="")
            {
                filedNames.value=upedfilename;
            }
            else
            {
                filedNames.value+=","+upedfilename;
            }
            Endupfiled++;//已上传数加一
         }
}
function checkFileState()
{
    if(Endupfiled!=Allupfiled)
    {
        alert("还有文件未上传成功！");
        return false;
    }
    return true;
}

Answer 1

删除同样要发ajax请求到后台去删除

Answer 2

删除肯定也要写东西到后台去删除已经上传成功的文件的，你可以在Dispose事件内加上向后台请求删除的逻辑，根据后台返回的结果再判断是否删除成功

Answer 3

我明白应该是这样来写，但是不知道如何获得点击时对应的那个文件的值，点击删除就把那个div层删掉了啊，上哪儿去找对应的文件呢，求详解

Answer 4

 function Dispose()//删除事件
         {
             //alert("ddd");
             filetxtDiv.removeChild(contxt);
             body.removeChild(form);
             body.removeChild(iframe);
             Allupfiled--;//总上传数减一
             if(upedfilename)
             {
                 if(upedfilename.length>3)
                 {
                     Endupfiled--;
                     if(upedfilename==filedNames.value)
                     {
                         filedNames.value="";
                     }
                     else if(filedNames.value.indexOf(upedfilename)==0)
                     {
                         filedNames.value=filedNames.value.replace(upedfilename+",","");
                     }else{
                         filedNames.value=filedNames.value.replace(","+upedfilename,""); 
                     }
                 }
             }
在这里添加执行删除的请求到后台，然后在后台处理上传的文件删除操作试下!

Answer 5

我明白应该是这样来写，但是不知道如何获得点击时对应的那个文件的值，点击删除就把那个div层删掉了啊，上哪儿去找对应的文件呢，求详解上传成功之后将页面的资源替换成服务器上的，并且带上文件Id返回来，这样删除的时候就知道是谁了，或者对比文件的哈希值

Answer 6

建议你搞懂原理，然后用jQuery