js文件上传及删除

liulucy2017 2018-04-27 09:29:59
在网上找了一个类似邮箱里附件上传的代码，但删除时只能删除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+"  ";//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;
}
...全文
1364 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
拉文麦克 2018-05-16
  • 打赏
  • 举报
 回复
建议你搞懂原理，然后用jQuery
iAm_Ike 2018-05-09
  • 打赏
  • 举报
 回复
引用 4 楼 liulucy2017 的回复:
[quote=引用 2 楼 xz_ike 的回复:] 删除肯定也要写东西到后台去删除已经上传成功的文件的，你可以在Dispose事件内加上向后台请求删除的逻辑，根据后台返回的结果再判断是否删除成功
我明白应该是这样来写，但是不知道如何获得点击时对应的那个文件的值，点击删除就把那个div层删掉了啊，上哪儿去找对应的文件呢，求详解[/quote] 上传成功之后将页面的资源替换成服务器上的，并且带上文件Id返回来，这样删除的时候就知道是谁了，或者对比文件的哈希值
liulucy2017 2018-05-07
  • 打赏
  • 举报
 回复
引用 7 楼 love560 的回复:

 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,""); 
                     }
                 }
             }
在这里添加执行删除的请求到后台，然后在后台处理上传的文件删除操作试下!
现在的重点是我如何从JS中传值到后台，不然怎么找到对应的需要处理的文件呢。 你说的这个我也知道
love560 2018-05-04
  • 打赏
  • 举报
 回复 

 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,""); 
                     }
                 }
             }
在这里添加执行删除的请求到后台，然后在后台处理上传的文件删除操作试下!
liulucy2017 2018-05-04
  • 打赏
  • 举报
 回复
引用 1 楼 starfd 的回复:
删除同样要发ajax请求到后台去删除
怎么去找到对应的那个文件呢，能否详细解释一下
以专业开发人员为伍 2018-05-04
  • 打赏
  • 举报
 回复
引用 5 楼 liulucy2017 的回复:
引用 1 楼 starfd 的回复:
删除同样要发ajax请求到后台去删除
怎么去找到对应的那个文件呢，能否详细解释一下
那要看服务器端开发者给你写的接口文档说明。这方面没有什么接口是现成的不用具体分析文档的。
liulucy2017 2018-05-02
  • 打赏
  • 举报
 回复
引用 2 楼 xz_ike 的回复:
删除肯定也要写东西到后台去删除已经上传成功的文件的，你可以在Dispose事件内加上向后台请求删除的逻辑，根据后台返回的结果再判断是否删除成功
我明白应该是这样来写，但是不知道如何获得点击时对应的那个文件的值，点击删除就把那个div层删掉了啊，上哪儿去找对应的文件呢，求详解
以专业开发人员为伍 2018-04-28
  • 打赏
  • 举报
 回复
删除同样要请求到后台
iAm_Ike 2018-04-28
  • 打赏
  • 举报
 回复
删除肯定也要写东西到后台去删除已经上传成功的文件的，你可以在Dispose事件内加上向后台请求删除的逻辑，根据后台返回的结果再判断是否删除成功
娃都会打酱油了 2018-04-27
  • 打赏
  • 举报
 回复
删除同样要发ajax请求到后台去删除
cupload.js原生的Js文件上传
原生的Js文件上传
uploadify大文件多文件上传在asp.net的使用,修改删除的bug和覆盖bug包括IIS配置
最近项目需要用到上传功能，上传功能要与邮箱里面的 添加附件 功能 一样，思来想去，最终确定用uploadify插件去做。好了，下面将详细讲解如何使用uploadify uploadify 其中有一个bug是，已经上传完成的文件，点击取消上传后，后台是不会跑去删除已经上传的文件的，它没有调用oncancel事件，这部分只能自己去写代码实现删除，下面会讲到这一块。我们先建立好一些普通的功能先。 好了，运行后看看效果，是不是如你所愿，上传完之后进行删除，后台也照样能删除。 下面来说一下uploadify 的第二个bug吧 就是你选择a,b,c文件上传，然后点击删除按钮进行删除，删除后再上传a,b,c它就会提示你说是否要替换文件。按道理来说根本就不需要这样的 好了，下面来做js文件的修改吧，还是修改jquery.uploadify.min.js
js实现上传文件添加和删除文件选择框
主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery BootStrap多文件上传js
基于jquery和bootstrap框架研发的多文件上传js,资源包含文件上传样式以及各种js,该控件可以浏览、删除、单个上传、批量上传
asp 多文件上传，可删除
asp 结合js多文件上传，有可以选择上传的文件删除功能。
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章