上传文件

<!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. JAVA是否最适合企业应用开发？

    · JAVA是否最适合企业应用开发? 当我刚入行做程序员的时候,那是在01-02年,铺天盖地的都是java,j2ee,公司也使用java作为开发语言,我也就随大流加入javaer阵营. 从那时起,各种 ...

  2. 问题 C: 查找

    #include <cstdio> #include <vector> #include <algorithm> using namespace std; bool ...

  3. 2级搭建类EM-Oracle EMCC 13c Release 3 在 OEL 7.7 上的搭建

    Oracle Enterprise Manager Cloud Control 13c Release 3 (13.3.0.0) 安装

  4. HTML连载64-a标签伪类选择器的注意点与练习

    一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...

  5. css动画 transition

    比如输入框触交渐变 在原来的属性添加 : .form-control{-webkit-transition: all .3s; transition: all .3s;} .form-control: ...

  6. SQLyog使用教程

    详见链接:https://blog.csdn.net/qq_41520612/article/details/95474531 SQLyog连接MySQL时出现的2058错误解决方法 解决方法:win ...

  7. Codeforce 459A - Pashmak and Garden （已知两点求另外两点构成正方形）

    Pashmak has fallen in love with an attractive girl called Parmida since one year ago... Today, Pashm ...

  8. 打铁选手的 CDQ分治 刷题记录

    BZOJ3262 模板题,三位偏序. 注意第一维排完序之后再给二三维排序的时候还是要考虑下第一维的:如果二三维都相等的话第一维小的要在前面 代码: #include <bits/stdc++.h ...

  9. C#之Quartz任务调度的使用（2.2.3.400）

    这里使用的Quartz版本号为2.2.3.400,.net 框架为4.0. 目的实现一个小案例,每隔一秒钟打印一条记录.后面会附上源码,以供参考. 建立一个  控制台程序. 代码: class Pro ...

  10. java自动化测试-json返回值校验

    参考: https://blog.csdn.net/xkhgnc_6666/article/details/50250283 实现举例: