上传文件

<!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. 问题 C: 神奇的口袋

    #include <cstdio> using namespace std; int n1; int nums[99]; int help(int i, int sum) { if (su ...

  2. linux100讲——71 if-else判断的使用

    1.if-then-else语句: 语法: if [测试条件成立] then 执行相应的命令 else 测试条件不成立,执行相应的命令 fi 结束 示例:vim 9.sh #!/bin/bash #i ...

  3. 图片,base64 互转

    import sun.misc.BASE64Decoder; import java.io.FileOutputStream; import java.io.OutputStream; /** * @ ...

  4. socket编程执行远程命令实现_python

    一.单客户端连接的例子: 服务端: import socket,os,subprocess server=socket.socket() server.bind(('localhost',1234)) ...

  5. 关于在Ubuntu中无法使用tree命令的原因

    初学linux系统的时候使用的是Ubuntu的操作系统,边看视频边学习,却发现很多命令行在自己使用的时候没有效果,只会盲目的百度,后面回过头来仔细一看才发现,原来终端早就给你答案了,只是自己一看到英语 ...

  6. S3C2440的时钟原理

    Crystal 无源晶体Oscillator 有源晶体(里面有有源器件) 无源晶振内只有一片按一定轴向切割的石英晶体薄片,供接入运放(或微处理器的XTAL端) 以形成振荡.有源晶振内带运放,工作在最佳 ...

  7. C++——指针5

    8.2 指向类的静态成员的指针 对类的静态成员的访问不依赖于对象,可以用普通的指针来指向和访问. //通过指针访问类的静态数据成员 #include <iostream> using na ...

  8. 剖析Javascript中forEach()底层原理，如何重写forEach()

    我们平时用的forEach()一般是这样用的 var myArr = [1,5,8] myArr.forEach((v,i)=>{ console.log(v,i) })//运行后是这样的1 0 ...

  9. Docker之设置加速器

    在Docker从仓库下载镜像是非常慢的,所以今天搞一个Docker设置加速器教程. 1. 创建一个Docker的配置文件. sudo vim /etc/docker/daemon.json 2. 编写 ...

  10. websocket+node建立聊天室简单使用

    1.建立新的文件夹dome 2.执行 npm init加载package.json文件 3.node不支持websocket所以npm install  ws 下载 ws插件 4.建立index.ht ...