js 文件上传下载功能

使用js实现文件下载对话框

//文件下载

function downloadFile(){  
  var elemIF = document.createElement("iframe");  
  elemIF.src = "文件路径";//文件路径
  elemIF.style.display = "none";  
  document.body.appendChild(elemIF);  
}  
 
使用js将服务器文件下载到本地
function downLoad(remoteURL,localURL) {   
    try{   
      var xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");   
      xmlHTTP.open("Get",remoteURL,false);   
      xmlHTTP.send();   
      var adodbStream=new ActiveXObject("ADODB.Stream");   
      adodbStream.Type=1;//1=adTypeBinary   
      adodbStream.Open();   
      adodbStream.write(xmlHTTP.responseBody);   
      adodbStream.SaveToFile(localURL,2);   
      adodbStream.Close();   
      adodbStream=null;   
      xmlHTTP=null;       
    }catch(e){   
      alert("下载文件时出错!URL="+remoteURL);   
    } 
    return localURL;      
} 
 
 
 
 
 
 
 
 
 
 
1、
<a href="#" onClick="download()">下载文件</a> 
<iframe id="downloadURL" height="0" width="0" src=""></iframe> 
<script language="javascript"> 
function download(){ document.getElementById("downloadURL").src="test.rmvb"; } 
</script> 
2、
function DownURL(strRemoteURL,strLocalURL)
{
try
{
  var xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");
   xmlHTTP.open("Get",strRemoteURL,false);
   xmlHTTP.send();
  var adodbStream=new ActiveXObject("ADODB.Stream");
   adodbStream.Type=1;//1=adTypeBinary
   adodbStream.Open();
   adodbStream.write(xmlHTTP.responseBody);
   adodbStream.SaveToFile(strLocalURL,2);
   adodbStream.Close();
   adodbStream=null;
   xmlHTTP=null;
}
catch(e)
{
   window.confirm("下载URL出错!");
}
//window.confirm("下载完成.");
}
//检验连接是否有效
function getXML(URL)
{
var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
xmlhttp.Open("GET",URL, false);
try{
  xmlhttp.Send();
}catch(e){
}finally
{
 var result = xmlhttp.responseText;
 if(result){
  if(xmlhttp.Status==200){
return(true);
  }else{
return(false);
  }
 }else{
  return(false);
 }
}
}
3、
jsp页面1：
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href = "download1.jsp?filepath=d:\\&filename=1a.txt" >downloadtest1</a>
</BODY>
</HTML>
jsp页面2：
<% 
String filename = request.getParameter("filename");//"1a.txt"; 
String filepath = request.getParameter("filepath");//"d:\\";
int i = 0;
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition","attachment;filename = "+filename); 
java.io.FileInputStream fileInputStream = new java.io.FileInputStream(filepath+filename);
while((i= fileInputStream.read()) != -1){
out.write(i);
}
%>
4、
function svcode(obj) {
var winname = window.open('', '_blank', 'height=1,width=1,top=200,left=300');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.txt');
winname.close();
}
5、
<script language="javascript" type="text/javascript">
//js自动下载文件到本地
var xh;
function getXML(geturl)
{
    //alert("ll");
    xh = new ActiveXObject("Microsoft.XMLHTTP");
    xh.onreadystatechange = getReady;
    xh.open("GET",geturl,true);                    
    xh.send();                         
}

function getReady()
{
    alert(xh.readyState);
    if(xh.readyState==4)
    {
        if(xh.status==200){
            saveFile("d:\mm.exe");
            return true;
        }
        else
        {return false;}
    }
    else
        return false;
}

function saveFile(tofile)
{
    var objStream;
    var imgs;
    imgs = xh.responseBody; 
    objStream = new ActiveXObject("ADODB.Stream");
    objStream.Type = 1;
    objStream.open();
    objStream.write(imgs);
    objStream.SaveToFile(tofile)
}
getXML("http://192.168.22.206/mm.exe"); 
//js自动下载文件到本地结束
</script>
6、
<html>
<head>
<script>
var _curfile= null;
function downfile(file)
{
_curfile = file;
document.getElementById("body").disabled = true;
document.getElementById("div1").style.display="block";
}
function OK()
{
document.getElementById("div1").style.display="none";
document.getElementById("body").disabled = false;
window.open(_curfile);
_curfile = null;
}
function NotOK()
{
document.getElementById("div1").style.display="none";
document.getElementById("body").disabled = false;
_curfile = null;
}
</script>
</head>
<body>
<div id="div1" style="display:none;position:absolute;left:100px;top:100px;border:solid 1px red;">
  您确认要下载此文件吗？ <br/>
<input type="button" value="同意" onclick="OK()" />
<input type="button" value="不周意" onclick="NotOK()" />
</div>
<div id="body">
<a href="javascript:void(0)" onclick="return downfile('C:\\Users\\limin_he\\Desktop\\card_error.rar');">IT知道网www.itwis.com下载测试 </a>
</div >
</body>
</html>
7、利用jquery插件jDownload
http://jdownloadplugin.com
8、
function downloadFile(sn_id){
alert('下载'+sn_id);
var sendurl ='"+req.getContextPath()+"/file.do?operate=downLoadFromFtp&sn='+sn_id;
$.ajax({ 
url:sendurl, 
type:'GET', 
error:function(data){ 
alert('失败'); 
}, ");
success:function(data){
alert('下载成功123'); 
$('#attlist').html(data); 
// slideDialog($('#fileRetMsg').val()); 
data.execCommand('SaveAs') 
} 
});  
}


上传邮件
1、JS判断上传文件类型
<SCRIPT LANGUAGE="JavaScript">
var extArray = new Array(".gif", ".jpg", ".png");
function LimitAttach(form, file) {
var allowSubmit = false;
if (!file) {
return;
}
while (file.indexOf("\\") != -1){
file = file.slice(file.indexOf("\\") + 1);
}
varext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) {
allowSubmit = true;
break; 
}
}
if (allowSubmit) {
form.submit();
}else{
alert("只能上传:  " 
+ (extArray.join("  ")) + "\n请重新选择文件"
+ "再上传.");
}
}
</script>
2、使用 JavaScript File API 实现文件上传
http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/index.html?ca=drs-
3、js 判断文件大小
function getFileSize(filePath)
{
var fso,f;
fso=new activexobject("scripting.filesystemobject");
f=fso.getfile(filePath);
if(f.size>1024*4){
alert(f.size+" bytes");
}
}
注：此种方式不太安全，只有在IE中有效且需要调整IE选项卡中的安全级别
Tools -> Internet Options -> Security -> Custom Level (Button) - >
4、
上传原理：
客户端和服务端通信最基本的用form提交刷新页面，提交数据包括文本和文件的二进制数据。而ajax提交的数据只能是文本形式。
 
一、最基本的用form表单的file，提交到服务端刷新
二、用jQuery的form插件file，实现无刷新提交表单
三、用jQuery的ajaxfileupload插件实现form file无刷新提交。原理是写一个form和一个iframe，form的target指向iframe即可，
    form提交后刷新iframe,而不刷新整个页面
四、用dwr（3.0版本以上）实现无刷新提交form file.
五、其他的就是用FileReader或者IE 的activeXObject等。但是这些方式不是有兼容问题就是安全问题。
http://www.cnitblog.com/guopingleee/archive/2009/01/16/53822.html
http://blog.csdn.net/wbw1985/archive/2010/11/25/6035326.aspx
http://hi.baidu.com/gaopenghigh/blog/item/a9e907d05a6beac4572c848c.html

本文章来自网络，如果侵犯到权益，请告知！
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhiqian/p/2677947.html