• 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

    本文章来自网络，如果侵犯到权益，请告知！
  • 相关阅读:
    nginx平滑升级及回滚
    redis源码安装
    memcached安装
    Harbor源码部署
    Maven源码部署
    tomcat单机多实例（未完待续）
    部署tomcat
    nginx编译参数详解
    CentOS7 安装pip/pip3
    nginx 部署配置
  • 原文地址：https://www.cnblogs.com/zhiqian/p/2677947.html
Copyright © 2020-2023  润新知