上传文件

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <!--引用相关的js文件  注意先引用jquery-->

    <script src="js/jquery-1.11.3.js"></script>

    <script src="js/ajaxfileupload.js"></script>

    <style>

        .file {

            position: relative;

            background-color: #b32b1b;

            border: 1px solid #ddd;

            width: 68px;

            height: 25px;

            display: inline-block;

            text-decoration: none;

            text-indent: ;

            line-height: 25px;

            font-size: 14px;

            color: #fff;

            margin:  auto;

            cursor: pointer;

            text-align: center;

            border: none;

            border-radius: 3px;

        }

            .file input {

                position: absolute;

                top: ;

                left: -2px;

                opacity: ;

                width: 10px;

            }

    </style>

    <script>

        $(function () {

            //选择文件

            $(".file").on("change", "input[type='file']", function () {

                var filePath = $(this).val();

                //设置上传文件类型

                ////if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {

                    //上传文件

                    $.ajaxFileUpload({

                        url: 'FileHandler.ashx',//处理程序路径

                        secureuri: false,

                        fileElementId: 'btnfile',

                        dataType: 'json',

                        success: function (data, status) {

                            //获取上传文件路径

                            //$("#txt_filePath").val(data.filenewname);

                            alert("文件上传成功！");

                        },

                        error: function (data, status, e) {

                            //alert(e);

                            alert("not");

                        }

                    });

                ////} else {

                ////    alert("请选择正确的文件格式！");

                ////    //清空上传路径

                ////    $("#txt_filePath").val("");

                ////    return false;

                ////}

            });

        })

    </script>

</head>

<body style="font-size:25px;">

    <!--ajax配合ashx实现文件上传-->

    <div>

        <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly" />

        <a class="file"><input id="btnfile" name="btnfile" type="file" />浏览</a>

    </div>

</body>

</html>

【 js 上传文件】的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  4. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  5. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  6. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 原生js上传文件，使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  8. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  9. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  10. js上传文件获取文件流

    上传文件获取文件流 <div> 上传文件 : <input type="file" name = "file" id = "file ...

随机推荐

  1. IO流学习之字节流（二）

    字节流缓冲区: 1.BufferedInputStream 构造函数(以字节流为基础进行操作): 常用方法: 代码实例: package InputOutput; import java.io.Buf ...

  2. python的for循环的神奇之处

    python的for循环太神奇了: 你可以编写这样的语句: for i in range(10) : j= i**2 print(j) 你也可以编写这样的语句: with open('/path/to ...

  3. docker 安装 jenkins touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var/jenkins_home/copy_reference_file.log. Wrong volume permissions?

    拉取镜像 docker pull jenkins/jenkins:lts 官方下载 运行容器 docker run -it -v /home/jenkins:/var/jenkins_home -p ...

  4. 工作问题--------爬虫遇到requests.exceptions.ConnectionError: HTTPSConnectionPool Max retries exceeded

    问题描述:爬取京东的网站,爬取一段时间后报错. 经过一番查询,发现该错误是因为如下: http的连接数超过最大限制,默认的情况下连接是Keep-alive的,所以这就导致了服务器保持了太多连接而不能再 ...

  5. FC-NVMe阅读摘要（一）

    首字母缩写 IU Information Unit BLS Basic Link Service ELS Extended Link Service PLOGI N_Port Login PRLI   ...

  6. AE接口编程

    [转]原文链接:https://malagis.com/arcgis-engine-10-develop-handbook-2-1.html 使用 ArcGIS Engine,也就意味着使用里面的接口 ...

  7. ACWing 238 银河英雄传说

    最近带权并查集这块比较薄弱,直接看食物链看不懂,就老实一步步来了. 有一个划分为N列的星际战场,各列依次编号为1,2,…,N. 有N艘战舰,也依次编号为1,2,…,N,其中第i号战舰处于第i列. 有T ...

  8. 【Unity|C#】基础篇(9)——匿名函数 / Lambda表达式

    [学习资料] <C#图解教程>(第13章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  9. 基本程序单元Activity

    Activity的4种状态,运行状态,暂停状态,停止状态,销毁状态,下面就是生命周期的顺序图 手动创建Activity 1.创建继承自Activity的Activity 2.重写需要的回调方法 3.设 ...

  10. 在多租户（容器）数据库中如何创建PDB：方法1 从种子创建PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:从零开始创建一个PDB(从PDB$SEED创建新的PDB) 对应路径:Creating a PDB --> Creating ...